 Bienvenidos, gracias por estar aquí, no esperaba tanta gente, la verdad, aunque sí que se había apuntado unos cuantos, ¿no? Y nada, vamos al dios porque si no, no da la tiempo. Yo soy Mar, como ha dicho él, esta cara de susto es la mía. Trabajo de un poquito mini a todo el mundo, pero solo para que los que no me conozcáis, trabajo en la aplicación de Lidl Plus, que es la aplicación de fidelización de Lidl, de supermercado, o sea, trabajo para un supermercado. Y nada, llevo siete años ya y hemos alcanzado unos 70 millones de usuarios, estamos en toda Europa, por lo que se ha hecho la cosa bastante grande. Pero antes que eso, trabajé en agencias de publicidad y allí sí que hice muchas webs en WordPress, que es mi pasado como diseñador web está ahí en WordPress, ¿no? Hice para unas cuantas marcas y nada, cuando empecé a trabajar en Lidl pues me desenganché un poquito el diseño web de WordPress, porque me especialicé en aplicación móvil, pero desde hace un par de años o así, estoy manejando las múltiples páginas web de mi pareja, que está aquí, que tiene dos, entonces tiene dos negocios online, le he hecho yo las páginas web, las he diseñado yo, bueno, yo utilizo Divi, ya sé que para algunos es un pecado, pero en mi conocimiento no da para más, y es lo que descubrí como pagamos la, como se llama, Lifetime, pues ahora estoy casi obligado a seguir utilizándonos, igual es la que me permite ser más versátil y meterle más customización al diseño, ok, intentó aprender cada vez más CSS. Pero bueno, hoy vamos a hablar de diseño web en general, esta charla no es sobre WordPress, es sobre diseño web porque WordPress es una plataforma pero todo el diseño es el mismo, ¿vale? Y nada, me gusta siempre empezar toda la charla que doy con esta frase, esto es la portada de un libro, yo la he diseñado el gráfico hasta que descubrí este libro, ¿vale? que fue más o menos yo que sé en 2010 o así, y me encanta este libro porque, bueno, es un libro sobre usabilidad, se escribió hace 20 años, pero todavía es, o sea, sirve hoy. Me gusta mucho este libro porque la misma portada ya te da la solución a todos los problemas, que es, bueno, don't make me think, ¿vale? no me hagas pensar, como usuario yo no quiero pensar, ¿vale? Este señor, Steve Craig, lo que describió dice, no quiero destinar ni una milésima parte de un segundo en tener que pensar si esto es clicable o no, o sea, los usuarios están en mi web o en vuestra web porque quieren comprar un producto, realizar una tarea, como ya sea lo que sé, apuntarse a una meetup, ¿vale? o encontrar información, todo lo demás sobra, todo lo demás es ruido, es tener que pensar, ¿no? Y no queremos que los usuarios piensen porque si piensan demasiado se cansan y se van a otra web, que es lo que lo tenga más fácil, ¿no? Entonces este señor Jared Pult también es un guru, por decirlo, de la usabilidad, ¿no? Y me encanta esta frase suya que dice, el buen diseño es admisible, ¿vale? Solo cuando es mal diseño que nos damos cuenta de que está mal. O sea, si algo está bien diseñado, no se nota porque actúa o funciona como esperamos que funcione, ¿vale? Pero cuando tiene fallos, cuando es mediocre, cuando estéticamente, no sé, nuevo es atractivo, ahí es cuando decimos, esto no está bien. Todo el mundo se da cuenta cuando un diseño es malo, ¿no? Pero la gente, el buen diseño suele obviarlo, ¿no? Y es como debe ser, o sea, tiene que ser invisible, vaya. Sobre todo hablando de interface, de UI, ¿vale?, en una web. Entonces yo os propongo un mini ejercicio, ¿vale? No sé si se ve muy bien, pero aquí tenéis dos tarjetas de producto bastante parecidas. ¿Cuál de las dos creéis que está mejor diseñado? Y no, es una broma trampa, ¿eh? La derecha, la derecha. Bien, ¿vale? ¿Por qué creéis eso? Alguien me puede decir... Ahí son múltiples motivos, ¿eh? Pero alguien me puede decir... Visualmente menos estresante. Yo también está más claro. Por ejemplo, muy buena, es menos estresante, también es muy buena. ¿Alguna cosa más? Se lee mejor. Mejor contraste, se lee mejor, aunque aquí el contraste no es bueno en ninguna de las dos. Pero, pero sí, son toda una serie de cosas que hacen, son pequeños detalles. Eso que a veces, yo que estoy muy acostumbrado a trabajar con desarrolladores, me dicen, me llaman ojo de alcón y cosas así. En plan, no es coña, ¿eh? En plan, les digo, es que me puedes poner un pixel más para la derecha y se ríen en plan, pero ¿qué pasa? ¿Cómo sabías que no está, ¿sabes? Que en un lado hay ocho y en el otro hay nueve, ¿sabes? Me doy cuenta de esas cosas, ¿vale? Porque al final me paso el día mirando los detalles de las cosas y la suma de todos los detalles es lo que hace buen diseño o un mal diseño. Entonces, vamos a ver si os puedo daros unos cuantos consejos y al final de la clase entendáis, entendáis por qué el de la derecha es mejor con muchos más motivos de los que ya habéis dicho, ¿vale? Obviamente, bueno, de la derecha es mejor. Entonces, ¿por dónde empiezo? ¿Por dónde empezamos la mayoría de diseñadores a nuestro proceso de diseño, ¿vale? Esto de aquí es Tilda Canartis, que es otro libro que también os recomiendo que os hagáis... Bueno, yo reconozco que no me lo he leído, porque es otro de esos libros que solo con la portada ya te enseñan muchísimo, ¿vale? Igual que el Don't make me think, solo con la portada. Y leer el índice ya no hace falta que te liensan contenido, ¿vale? Entonces, lo que dice este señor es que, en resumen, es que la creatividad como tal no existe de manera genuina, sino que todos los creativos, todos los artistas, todos los diseñadores lo que hacemos es copiarnos unos a los otros. Por ejemplo, lo que sé, la música trap que ahora está de moda es una mezcla entre el reggaeton y el rap, ¿no? Dicho así rápido. Habrá a quien no esté de acuerdo. Pero lo que quiero decir es que cuando alguien inventa algo nuevo, en realidad lo que está haciendo es coger varias cosas que ya existen y juntarlas de una manera que mola y eso parece que es más creativo, ¿no? Entonces, ¿por dónde empezaríamos? Pues robando como si fuéramos artistas. Por ejemplo, haciendo Benchmark de, ¿sabes lo que es Benchmark? O sea, buscar... Si tú, por ejemplo, tienes que hacer un diseño de cualquier cosa, pues buscas cómo son las webs de la competencia, por decir algo, las analizas y sacas conclusiones, ¿no? Vamos a repasar los números uno. Bueno, primero de todo, perdón, la ley de Jacob. Este señor también es, como igual que Steve Crack y Jared Spool, uno de los padres de la usabilidad. O sea, este señor tiene... Jacob Nielsen tiene la web más consultada de la usabilidad del mundo. Tiene una fundación junto con Don Norman, que se pasa el día haciendo experimentos de usabilidad y cualquier duda que tenemos los expertos en UX de la usabilidad, siempre vamos allí, es como la Biblia, ¿vale? Si quieres saber, tienes dudas si usar un checkbox o un switch, un toggle de esos, pues vas a la web de Jacob y ahí te dirán todos los estudios que se han hecho respecto, si el móvil funciona mejor uno, si el desktop funciona mejor otro, etcétera. Entonces, yo lo que dice este señor es como Jesucristo del UX, ¿vale? O sea, va misa. Y este señor dice, los usuarios pasan la mayor parte de su tiempo en otros sitios. ¿Vale? Os he dicho al principio que yo trabajo haciendo la aplicación de Leader Plus, ¿vale? Y sí, sí tiene 70 millones de usuarios, pero la gente va a comprar de media una vez y media la semana. Es decir, usan mi aplicación unas seis veces al mes, ¿vale? Y la usan durante cinco minutos. El resto del tiempo, la gente se pasa millones de horas en el teléfono o en el ordenador, están en Instagram, en YouTube, en Gmail, en Facebook, en cualquier sitio. Es decir, el 99,9% del tiempo están en otros sitios. Entonces, la conclusión a la que llega Jacob es cuando estos usuarios vengan a tu sitio, tienen que sentirse como en casa. ¿Vale? Les tiene que sonar familiar. Lo que nos está diciendo es que todos los sitios, cuanto más se parezcan, más fácil es que la gente se mueva por ellos. Si buscamos analogías en las tiendas físicas, por ejemplo, comparamos las encomendas con las tiendas físicas, ¿no? Todas las tiendas físicas se parecen. Todas, pues, tienen una entrada, tienen un mostrador, tienen pasillos. Si es una tienda de ropa, pues tiene cambiadores. Si es un supermercado, pues tiene una línea de cajas, pues las webs deberían ser igual, ¿vale? Todas las webs, todas las e-commerce, se tienen que padecer. No intentemos, como se dice, remetar la rueda, ¿no? No pongas el carrito abajo de izquierda. Ponga uno arriba a la derecha porque es lo que hace el 99% de las personas y es porque está bien hacerlo así, ¿vale? Entonces, como sabemos que todos los usuarios se pasan, la mayor parte de su tiempo fuera, o sea, en otros sitios y que en los otros sitios, pues, hay que estar bien, ¿no? Eso porque se parecen entre ellos. Pues hacemos un benchmark. Por ejemplo, aquí hice uno muy rápido. Imaginaos que os viene la inmobiliaria de la esquina y os pide que le hagáis una web. Y vosotros, pues, lo hagáis de hacer una web en Google Apps, ¿no? Pues, lo primero que tenéis que hacer es eso. Empezar a mirar webs de inmobiliarias, webs de pisos. Por ejemplo, aquí poso idealista, fotocasa. Ya sé que no son inmobiliarias al uso, pero están relacionadas con la materia, ¿no? Con el tópico. Y empezamos, las ponemos todas juntas. Identificamos patrones. ¿Vale? Vemos que todas, bueno, esto no es genuino de las inmobiliarias, pero todos tienen una gran imagen, ¿no? Una hero image de estas que se llama. Pero vemos que, por ejemplo, fotocase idealista tienen una especie de componente con un filtro que parece como si fuera de estos de viajes, ¿no? Con buscador y tal. Vemos que estas dos tienen también una especie de listas para filtrar también. O, incluso, la primera tiene unas cajitas con unos iconos de los servicios. La segunda tiene, pero un poquito más abajo. Identificamos patrones y empezamos a ver cosas en común que tienen las inmobiliarias en este caso. Si fueran tiendas de ropa, pues sería otra cosa. Y no solo eso, sino también el estilo que tienen. Pues si una es más seria, tiene los cornerradios más cuadrados o una es más simpática, las tiene más redondos. Y empezamos a identificar patrones y cosas que hacen todos y los quedamos a ver con las que se adapten a nuestro cliente, ¿no? Aquí hay otro ejemplo de rangemark, pero esto ya a componente. En este caso pues un tooltip. Un tooltip para quien no lo sepa, es este mensajito pequeñito como si fuera un bocadillo de cómic, ¿no? Que nos señala pues cuando una funcionalidad es nueva y hace algo en web. Suele pasar que cuando pasas el mouse por encima te aparece, pero en móvil lo tienes que mostrar la primera vez que el usuario entra en la pantalla. Vale, pues yo utilizo mucho esta web que se llama mobile, no sé si eso suena, si la conoce a alguien. Aquí hay un repositorio de millones de apps y millones de componentes. En este caso simplemente tuve que poner tooltip y me aparecieron ya Instagram, Gojek, bueno, Gojek es una app también masiva de Indonesia por ahí. Tiene millones de cenas de millones de usuarios. Signal Spotify Uber y luego hay pues cientos más de ejemplos, ¿no? Y aquí yo pude ver, esto es real de mi trabajo, o sea tuve que hacer este mensaje. Pude ver pues que no había nada escrito en realidad, que es un componente que es tan nuevo que no hay un patrón definido. Tienden a ser negros o blancos, ¿vale? Son colores neutros, no utilizan los colores de la marca, uno es azul, otro rojo, pero tienen a ser negros o blancos, tienen a ser redonditos, no más de dos líneas por tooltip, etcétera, entonces me dan una serie de ideas, hay uno que tiene una X para cerrar, para la medida ya no, pues hago una lista de todos los platrones y entonces diseño mi propio tooltip para Leaden, ¿vale? Y por último, pues inspeccionamos webs, esto yo creo que todo el mundo lo hace, pero yo lo digo porque gente cuando lo digo se sorprende. Inspeccionamos webs, que creemos que están bien diseñadas como por ejemplo BNB, en el caso pues no es una movilidad tampoco, pero tiene que ver si quieres. Con el tema y decimos, el BNB por cierto es, tenemos uno de los mejores diseños a nivel de, objetivamente hablando, a nivel de interfaz que hay, ¿vale? Pues, clic derecho, inspeccionar, ¿cuánto mide el board de radios del BNB? Lo pone ahí, doce, ostras, si me mola el diseño del BNB, pues yo también voy a ser el mismo, ¿vale? Voy a usar doce, en lugar de trece o quince o nueve, ocho, o hacerlo random, pues voy a usar doce. No lo sé de momento por qué, pero sé que me gusta, ¿no? Al final todo esto son trampas para no tener que pensar o que decidir lo que os he dicho antes. En lugar de estar todo el día pensando, ahora que le pongo este corne radio, este espaciado, este color, este... Los diseñadores nos pasamos la mitad del tiempo mirando qué hacen los demás y lo que nos gusta lo copiamos, así de claro, ¿vale? Ahora veremos por qué es doce, ¿vale? porque tiene un motivo. La gracia de esto es que luego te puedes crear un sistema. Esto me lleva a la ley de Hick, ¿vale? Este sí que no sé quién es, Hick, pero bueno, está en lo que es el compendio de leyes de UX, ¿vale? Entonces, esta ley me gusta, entonces la enseño. Hay muchas más, ¿eh? Hoy vamos a ver tres o cuatro. Pero esto es guay, esto es importante para... Yo la uso para luchar contra los clientes o contra los project managers, ¿no? Cuando quieren meterte más a las manos de mi diseño, saco esta carta. El tiempo que lleva a tomar una decisión aumenta con el número y la complejidad de las opciones. ¿Os acordáis el rollo ese de hace unos años de máximo tres clicks? ¿Vale? No sé si los más veteranos seguro que se acuerdan, ¿no? Corría el bulo por ahí, por internet, de que si te pasabas de tres clicks en cualquier web, en cualquier tontería, perdías conversión, ¿no? En realidad, bueno, no era así, obviamente. Lo que sí que afecta la conversión es el tiempo que tarda la gente en tomar decisiones, ¿vale? Es lo que he dicho antes de no me hagas pensar. La gente, cuanto menos piensa, más rápido va, porque la gente va con automático. Ahora que se encuentran algo que no entienden, bueno, ahí sí que empieza a contar el cronómetro y se cansan, se van a otra web. Y esto nos lleva a lo que es la carga cognitiva. No sé si sabéis lo que es la carga, bueno, es un concepto, ¿vale? Básicamente es toda la cantidad de procesos, lo pongo aquí, mentales que el usuario necesita para entender tu sitio. El tiempo que tarda en escanear tu página y entender todo lo que está viendo, desde los iconos, qué es esto, qué pone aquí esta imagen, no entiendo, pero todo esto pasa de manera automática. Y esto afecta directamente en cómo los usuarios encuentran tu contenido o completan tareas, como puede ser registrarse, comprar, etcétera. Entonces, ¿cómo combatimos la carga cognitiva? Pues con mensajes claros, obviamente, ¿no? El usuario llega a tu web y tiene que entender a la primera de qué va eso. Lo primero que tiene que ver, no una imagen súper bonita de una familia feliz. Tiene que ver un titular que diga, aquí vendemos esto. O aquí ofrecemos esto. Y un CTA, bien claro, que diga comprar o contactar o registrarse, lo que sea, lo que tú quieres que haga. Espacio generoso, ¿no?, o sea, cuántas. Más separadas están las cosas, más fáciles de digerir el contenido. Y esto es el Progressive Disclosure, que lo he puesto en inglés, porque bueno, es como es el concepto, pero ahora lo explicamos. Un ejemplo de carga cognitiva alta, ¿vale? Esta web existe, de verdad, ¿eh? Esta web se hizo famosa hace años, porque el empresario, alquiler de coches, ¿vale? Se volvió loco y quiso hacer una web así. Y todo esto son give animados, en realidad, ¿eh? O sea, hay luces citas, los coches se mueven. O sea, es una completa locura. Es el antidesenio, pero se hizo tan famosa por hacerla así que ahora le va bien el negocio. O sea, pero bueno, estaríamos de acuerdo que es un ejemplo de carga cognitiva altísima, ¿no? Si vosotros intentáis hacer esto, pues no vais a convertir nada. Existe también, a menor medida, ¿no? Pero esta web, no sé si quien tiene más cotas, seguro que conoce esta web o plus. Existe también lo que se llama el banner blindness, ¿no? La ceguera de, por anuncio. Si vuestro diseño parece un banner, el usuario no lo va a ver. Es así. Creo que me invoy a inventar el dato, pero creo que está en torno a... Es que lo consulté, pero no lo apunté. En torno a 3.000 y 5.000, vamos a ser generados. Impactos diarios de publicidad, ¿vale? O sea, cada persona ve mínimo 3.000 anuncios al día. Ya sea un banner, una pegatina, pegador o una farola, lo que sea, en la tele, en YouTube, donde sea. Entonces, nos hemos vuelto muy expertos en evitar los banners, ¿vale? Nuestro cerebro ve un banner y dice, pa, paso. Es así, de vez en cuando alguno funciona, ¿no? Pero la mayoría, si no están supercurrados o hay buena producción de publicidad, pasamos de ellos. Entonces, aquí hay dos pedazos de banner que dicen lo mismo en cada lado. Lo único que aporta es ruido a la página web. O sea, si yo entro aquí a comprar, y tengo, por ejemplo, un perro y entro aquí a comprar, y veo ahí un gato gigante con un QR, o sea, ya me está desviando la atención a lo que yo quiero hacer y es lo que decíamos, no me hagas pensar, ¿no? Yo quiero encontrar la comida para perro aquí. Y luego, lo que es peor, porque eso es un anuncio de verdad, de Royal Canine, pero lo que es peor es el carrusel este, es de la propia web. Eso no es un anuncio, ahí están, no sé qué ponen, personalidad de las mascotas. No sé qué ponen porque directamente mi cerebro no para de intentar evitar leer lo que pone ahí, ¿vale? Pero es un contenido propio, ¿vale? Entonces, mal ejemplo, ¿vale? Y lo de progressive disclosure que os he dicho antes, es que no sé cómo se llama el español, sería como revelación progresiva. Trata de no esconder contenido, sino ir mostrándolo poco a poco, ¿vale? Que el usuario lee de tiempo a digerirlo. En este caso, por ejemplo, tenemos la página de producto y lo importante, se ve, ¿vale? Aunque no se ve muy grande, no, porque es lo que sé. El estilo de esta tienda, se ve el título de producto, se ve el precio, el carrusel, la imagen está, añadir la carrito, todo muy bien. Y si queremos saber el coste de... no sé si se le... pero os digo lo que pone. El primero es descripción, shipping, o sea, el coste de shipping y lo último son las reviews. Pues si queremos saber más, pues si queremos ver las reviews, pues le damos al botoncito de ver las reviews y las vemos ahí, ¿vale? En lugar de tener todo, todo ahí, acholón, digamos, todo contenido puesto en la web, pues vamos poco a poco mostrando. Esto no hay una norma escrita, ¿vale? Es un arte, o sea, hay que saber qué esconder, porque a veces, claro, te quedan las cosas demasiado, quizás escondidas, ¿no? o tu cliente te dirá, esto lo quiero que se muestre, le dices cargar cognitivo, cuidado, tal. Pero yo, por ejemplo, aquí, en la descripción, si es una descripción corta, la voy a mostrar, ¿vale? Pero, bueno, en este caso, esta gente decidió ocultarlo. ¿Vale? Vamos con la siguiente. Ley de proximidad. Esta es fácil, o sea, no es una ley de nadie, es una ley genética del diseño, ¿vale? o de la gestal. En los objetos que están cerca o próximos, entre sí, tienden a agruparse, que es un jica que, bueno, pues tapó a lo que dice que si hay dos cosas aquí y otra más apartada, tendemos a pensar que esas dos cosas pertenecen al mismo grupo, ¿vale? Por ejemplo, esto no tenía ningún ejemplo y lo de diseñar así rápido. Imaginaos que esto es una típica grid de productos, ¿vale? De una tienda, o sea, la típica tarjeta, ¿no? Foto, título o precio, lo que sea, y el botón de comprar. ¿Qué pasa? Que muchas veces se reserva espacio por si el título ocupa dos líneas, por si no sé qué nos aguantos, porque queremos que todos los botones estén alineados y ¿qué pasa? Que hay más espacio entre el título y el botón que entre el botón y el siguiente producto, ¿no? Y esto crea carga cognitiva también, porque el cerebro dice este botón que pertenece arriba o abajo, ¿no? Cuando ocurre esto, bueno, normalmente nos solucionamos poniendo o sea, poniendo cards de producto, lo que se llaman tarjetas, ¿no? O sea, poniéndole un borde a cada producto para que agrupa todo lo que hay dentro, ¿no? Y esto nos lleva al cómo gestionamos los espacios, ¿vale? Bueno, en layout. Aquí me voy a poner un poco técnico, pero ya veréis cómo todo luego tiendrá sentido. Esto es un ejemplo del design sistema de Atlassian, ¿vale? Atlassian son los que tienen Gira y todos estos que yo utilizo desgraciadamente y pero tiene un sistema de diseño bastante completo y me gusta mucho cómo utilizan los espaciados y en realidad todo el mundo utiliza, he puesto este ejemplo, pero todo el mundo utiliza la misma lógica en realidad. Existe lo que se llama la regla del 8, ¿vale? Lo digo porque si a veces tenéis dificultad, cuando a mí me pasa también cuando estoy ahí con el div y tal, ¿cuánto padding le pongo?, ¿cuánto margin le pongo?, ¿cuánto separo esta sección de esta sección, ¿no? Pues como todo lo que os he dicho antes, los diseñadores tenemos truquitos, ¿no? Entonces utilizamos esta escala de espaciados que sabemos que es armónica y que funciona para todos los casos del mundo. Se llama la regla del 8, lo que pasa es que los últimos años hemos ido metiendo estos números que están en rojo, ¿vale? Y al final la gente le llama la regla del 4, ¿vale? Cuando le das la regla del 8 con Twix. Básicamente se trata de que cada espaciado, cada nivel de espacio es múltiple de 8, ¿vale? Entonces lo que hacemos es en los espacios pequeños, por ejemplo entre dos iconos o dentro de un botón que hay un icono y un texto, a veces no el comprar con el carrito y tal, utilizamos los números pequeños, ¿vale? Dos, cuatro, ocho, ¿no más? Entre componentes, como pueden ser por ejemplo dos botones o una tarjeta y un botón, una foto y un texto, utilizamos los medios, de 12 a 24, o sea, le que te quede mejor, o sea, a veces será 12, a veces será 16, pero si tú pones yo qué sé, 16 en un lado pon 16 en el otro, ¿no? Que sea el simétrico y tal. Y en lo que sería el layout, ¿no? O sea, el espacio entre secciones, entre la cabecera, el mensaje gordo, el suscita, los letters, el no sé qué, utilizamos los grandes, ¿vale? De 32 a máximo 128. Entonces, teniendo esta escala es muy fácil porque es simplemente seleccionar uno de estos, ¿no? O sea, ¿cuánto espacio le doy entre los dos iconos? Pues, no sé, pues cuatro. Con cuatro, si ves que queda demasiado espaciado, pues le pones dos, ¿no? Y si ves que queda demasiado apretado, pues le pones ocho. Otro ejemplo más práctico. Esto es material design, ¿vale? No sé si suena. Material design es el sistema de diseño de Google, ¿vale? Es el que utiliza para Gmail, YouTube, etcétera. Android sobre todo, ¿no? Yo me lo sé bastante de memoria porque como trabajo mucho con Android. Siempre que tengo alguna duda, vengo a la web de material design y ahí está súper bien explicado todo. Entonces, los botones, por ejemplo, en material utilizan lo que se decía la regla de al ocho también. Si os fijáis, el alto del botón es 40 píxeles y luego tienen 24 píxeles de padding, ¿vale? Lateral, múltiples de ocho todo. ¿Qué pasa en el caso de que el botón tenga un icono? Pues, en lugar de poner 24 por cada lado, lo que hacen para igualarlo visualmente es 24 a la derecha y a la izquierda ponen 16 y 8 entre el botón y el icono y la etiqueta. En realidad es fácil, entre comillas. Pero cada vez que hago un botón, yo los hago así. Para cualquier proyecto, tiene que engajar. El sistema WordPress también tiene su propio sistema de diseño. Creo que no utilizan la regla del ocho porque es una cosa que se inventó más tarde por diseñadores. Utilizan el sistema que creo que va de 5 en 5. O sea, por defecto los paddings y los margins en WordPress están en una escala de 5. O sea, pues el 5, 10, 15, 20, etcétera. Pero bueno, yo los cambio todos. Cojo el DB y los pongo todos a múltiples de ocho. Y parece una tontería, pero realmente es algo que funciona. Es mucho más fácil diseñar así. Aquí tenemos otro ejemplo de la página de login de la aplicación de Nike. Todo muy bien. La página de login se enfijita, pero está mejor que otras. Si la comparasemos con otra aplicación más pocha. Porque todos los espacios y tamaños de las cosas están dentro de la escala de múltiples de ocho. Aquí lo pongo más en zoom. Si os fijáis, he puesto en rojo, claro, los espacios, los espaciados horizontales, y en lila los verticales. El margin lateral es 24 pixels múltiples de ocho. Y todos los espaciados son 32. O sea, los grandes están utilizando 32. Y luego, entre otras cosas, 32 es demasiado. Por ejemplo, debajo del título que tiene esto de United States, han puesto 16, que es la mitad. Es más fácil. Si en un sitio pones 32, pues a otro pones la mitad. Podrían haber puesto 24, podrían haber. Ha habido hecho, pero si 24 es demasiado, pues dijeron, voy a poner 16, que queda mejor. Pero en un caso, pones 22. Te ciñas a coges uno de los que tienes. Y por ejemplo, ahí debajo del input de email, han puesto 4 para separar el desto que pone requerido. Podrían haber puesto 2, o podrían haber puesto 8. Vieron que por el tamaño que tiene la caja de texto, que es 20, pues 20 más 4, ya da 24, y todavía queda más armónico. Y el botón 56. Al final, pues todo son múltiples de ocho. Esto va bien utilizarlo, no solo para los espaciados, sino por lo que podéis ver, también se utiliza para las cajas de texto. La caja de texto de título, mide 80, la caja de texto de la política mide 48, todos son múltiples de ocho. Y esto nos lleva a que cuando estemos creando textos, el H1, el H2, etcétera, etcétera al párrafo, también le ponemos el interlineado que sea múltiple de ocho. Y esto hace que encaje perfectamente en la retícula que tenemos de la página. Vamos a verlo con los textos. ¿Cómo vamos? Quedame de ahora. ¿Has hecho media hora? Ah, vale. Bien. Sí, sí. Lo primero de fuentes es Serif o San Serif. Es el gran dilema que tiene mucha gente. A ver, aquí tampoco me voy a mojar mucho. Yo voy a decir, la mayoría de las páginas web utilizan San Serif, no. Es como más moderna. Esto viene dado porque antiguamente tenía mucha menos resolución las pantallas. Entonces tú utilizabas una tipo con Serif y se veía pochísima. Ponías Times and Roman en el primer iPhone y por mucho que fuera un iPhone se veía fatal. Entonces todo el mundo tiende a utilizar San Serif. Si no es que es complicar la vida utilizar San Serif. Simplemente, dependiendo de si vuestro cliente es más, yo qué sé, la Serif es más elegante. Por ejemplo, se utiliza en blogs tipo Medium. A mí me gusta mucho, ¿no? Leer párrafos largos con tipo grafía Serif está guay. En Medium, conocéis Medium, supongo, ¿no? Los titulares son SANS y el contenido del blog del post es con Serif. Aparte de esto y de webs de periódicos, que no sé si utilizan supongo para los titulares, la mayoría es San Serif. Si utilizáis Serif por eso, no utilizéis nunca menos de 16. O sea, más pequeño de 16, ya estaríamos jugándonos la, ¿no? Porque los textos se perciben como bloques, ¿vale? Esto es una captura de Medium justamente. Ah, por cierto, siempre alineado a la izquierda, ¿vale? Siempre, siempre, siempre, excepto un caso o dos en la vida alineado, nunca justificado, ¿vale? Por mucho que os parezca más elegante, no lo es porque estira las filas, rompe el espacio entre palabras, es un desastre. La gente de izquierda a derecha y de arriba abajo, en esta cultura occidental. Entonces, siempre alineado a la izquierda y os olvidados. El único caso en que alinearemos al centro es cuando teníamos los típicos iconos, estos en la home de servicios, ¿no? Pues pintamos, reparamos y hacemos los g. Ahí sí, pones el icono y el texto alineado al centro, cuando son párrocos o títulos, izquierda, siempre. Y lo que quería decir, se perciben como bloques, ¿vale? De lejos se ven como manchas. Por eso no quiero que justificéis, porque si justificáis las filas, grises estas, se romperían, se vería como una discontinua. Entonces, para decidir el interlineado, ¿vale? Si hay demasiado interlineado, el bloque, que digo, la mancha, se desdibuja. Si hay demasiado poco, se ve como muy denso y provoca rechazo también. Es como, uf, ahora me tengo que leer este tostón. Es así, o sea, nuestro cerebro, no lo piensas nacionalmente, pero nuestro cerebro lo piensa, ¿no? Es carca cognitiva, las dos, porque las dos son difíciles de digerir para el cerebro. Los dos son, hay que hacer un esfuerzo mental, ¿no? Entonces, ¿cuál sería el linehead, el interlineado correcto? Más o menos, o sea, nunca hay ciencia cierta en esto. Más o menos 1.5, si estáis utilizando, bueno, 1.5 en general. Si estáis utilizando el REM, ¿no? Que es, si utilizáis base 16, pues sería 24, ¿vale? Máximo 2, los ya te estás pasando, ¿no? Creo que en medium, ahora me pilláis, pero bueno, está entre estos valores, seguro. Pero, obviamente, más de 2 ya es demasiado. Esto hablando de párrafos, ¿eh? De títulos, siempre hay que reducir un poquito más de lo que está por defecto, ¿vale? Porque los títulos, como son muy grandes las letras, pues claro, tienden a hacer un interlineado proporcional a lo que es el tamaño de letra, porque la persona que diseño la fuente no pensó en que esto lo utilizarías en un móvil o lo que es fuera, ¿no? Pero los títulos, sí que para crear esta sensación de bloque, hay que hacerlo un poquito más corto. Pero los párrafos, meterle caña. Aquí hay una herramienta que descubrí el otro día para hacer esta charla de good linehead, ¿vale? Si no sabéis que vais completamente perdidos, pues podéis ir a, es una web, podéis poner ahí el tamaño de letra que queréis usar y el multiplicador 1.3, es lo que sea, o mira, lo que pone aquí baseline grid, le ponemos el 8, ¿no? Que es lo que estamos utilizando y te da un aproximado, ¿no?, del que tendrías que utilizar, en este caso, 24. ¿Veis? Ya no se está diciendo que si estás utilizando la fuente de 16, pongas el interlineado de 24, que es perfecto, porque es multipliado de 8. Luego está el ancho de la línea, también, que aquí es donde el interlineado, mira, todavía porque las fuentes vienen por defecto bastante bien hechas, ¿no? Pero lo que es el ancho de la línea, aquí sí que se ven verdaderas catástrofes, ¿no? Un buen ancho, o sea, esto sí que es casi matemático, ¿no? Un buen ancho en móvil va entre 30 y 50 caracteres y en desktop entre 50 y 75, ¿vale? O sea, menos que eso, son líneas demasiado cortas, que tienes que estar ahí saltando de línea todo el rato y al final te mares, o más que eso, son líneas demasiado largas, que hace que cuando has llegado al final y quieres saltar de línea, tú ya no sepas por qué línea más, ¿vale? Aparte de que se hace mucho más pesado de leer. Un ejemplo de lo que no hay que hacer, ¿vale? Esto es una web platform que me encontré otro día, un blog de plantas. Aquí está utilizando todo el body, ¿no? Para meter ahí el, es un blog, o sea, es un post. Líneas larguísimas, larguísimas. Es lo que digo, cuando llegas al final y saltas de línea te equivocas, seguro, ¿vale? ¿Cómo lo hace Medium? Por muy ancho que sea, o muy ancha que sea tu web, 75 caracteres máximo, 75, 80, no sé. Y yo me diréis, pero a ver, yo me voy a poner a contar caracteres. Bueno, seguro que algunos de vosotros tenéis algún plugin o alguna cosa que cuenta caracteres, ¿no? Pero lo que os he dicho antes, clic derecho e inspeccionamos. ¿Qué hace Medium? Mide 680, el ancho de su, digamos, body, ¿no? En un post. Pues nada, vamos a nuestro blog y le ponemos 680 y vemos cómo queda. Vale. Si tenéis alguna pregunta por eso, podéis interrumpirme, ¿eh? Cuando queráis. Si no, pues al final, si da tiempo. El efecto Bonrestor. Esto queda como muy fancy, pero nunca utilizo. Es cuando estamos ahí trabajando, los diseñadores no estamos... ¿Vamos a utilizar el efecto Bonrestor? No, o sea, pero existe, ¿vale? Está apuntado como leyes de UX, ¿no? Y lo que dice este efecto, bueno, es un efecto universal, pero el señor Bonrestor fue lo apunto. Cuando hay varios objetos similares presentes, es más probable que se recuerde el que difiere del resto. ¿Qué quiere decir? Que si tú tienes un rebaño de ovejas y hay una negra, todo el mundo se va a fijar en la negra, ¿vale? O sea, es eso. El que es diferente es lo que destaca, ¿vale? Y cómo lo utilizamos nosotros en nuestro diseño web, ¿no? Pues sobre todo se usa con el color, ¿vale? ¿Cómo lo utiliza, por ejemplo, Airbnb, que hemos dicho que era una web bien diseñada, ¿no? Airbnb utiliza, si os fijáis, tiene un color muy brillante, muy potente, su marca, pero prácticamente no se ve. O sea, toda su web, o sea, esto es la home. El color está en el logo, obviamente, porque es la marca, y solo más en el buscador. Si os fijáis, en el botón de buscar aquí arriba, ¿vale? Todo el resto, aquí hay un botón flotante que es completamente negro. Bueno, completamente no, es negro, no puro. Entonces, ¿qué pasa? Que aquí en Airbnb el protagonista es el contenido, ¿no? Las fotos, los productos. Pero ellos saben muy bien, porque hacen muchos tests, que lo primero que hace la gente, o sea, esto está para hacer bonito, es un escaparate, pero raramente tú vas ante el Airbnb y vas a alquilar la primera casa que veas aquí. Tú lo que quieres es buscar una casa donde tú vas a ir a... de viaje, ¿no? Entonces, lo que hace todo el mundo es irse al buscador. Entonces, la única cosa que llama la atención, por encima del logo, en esta página es el buscador, porque utilizan el color corporativo, y ya está, ¿vale? O sea, cuando os digan a vuestros clientes, ponen esto rojo, que se vea más, es un momento. Igual si le quitamos color a todo lo demás, hacemos que tu color de tu marca se vea por encima de lo demás, ¿no? Lo mismo en la página de producto, de detalle. Lo única cosa que tiene el color es el botón RCA, de reservar. Una parte de este diamantito, que bueno, es porque este... esto es especial. Sí, no sé qué quiere decir, pero no lo tienen todas las páginas. Es que es difícil de encontrar, ponen. Esta web os sonará, seguro, ¿no? La busqué expresamente. Dije, esta gente tiene que saber del negocio de los hostings. Pues, más o menos lo mismo, ¿vale? ¿Qué hace hostinger? Tiene un color corporativo, pero lo utiliza bastante sabiamente. Si os fijáis, sí que no se ve muy bien, ¿vale? Pero sí que el titular y todo esto son variaciones del mismo lila, ¿vale? Utiliza una paleta del mismo lila con diferentes intensidades, ¿vale? Este titulo no es negro, es lila oscuro. ¿Vale? No se ve bien ahora. Utilizan también el color de la marca, pues para un típico banner, aunque no es un banner, es una imagen que refuerza la oferta. Y, pero sobre todo, el CTA es lo que se ve más, ¿vale? Es lo que decíamos de la carga cognitiva. Utiliza no llenes de mierda en la pantalla y utilizan bien el color de la marca, ¿vale? ¿Qué pasa cuando no podemos, o sea, cuando tenemos varios CTAs o necesitamos utilizar el color de la marca mucho, ¿vale? Entonces, en este caso existe lo que se llama accent color, ¿vale? Que es un color lo más opuesto parecido al color de la marca, ¿vale? En este caso el color de la marca es lila, pues el color de la accent es como una especie de salmón, rojo salmón tal. Y esto porque se usa, pues lo que decíamos del efecto Bond Restor, ¿no? Si tienes varias cosas similares, como son estas tarjetas de producto, de precios, pues tú quieres destacar una, pues le cambias el color. Y como el color de la marca ya lo estás usando en todas las demás, pues te metas este color accent, ¿no? Ya os digo, si cogieramos un círculo cromático de esos, pues seguramente estaría bastante en el otro lado, ¿no? Cuanto menos se parezca, mejor. Esto es difícil de meter, porque normalmente el cliente te va a decir, estás loco, no quiero este color que no es de mi marca, en mi producto, pero cuando se mete la verdad es que da buenos resultados. Por cierto, aprovecho para decir que si queréis otro día puedo hacer otra charla sobre este tipo de páginas y todos los trucos psicológicos que se utilizan, ¿vale?, en este tipo de páginas para vender. Y bueno, sobre todo, si utilizáis color en botones tal, tenéis que tener muy, muy claro que tienen que ser accesibles, ¿vale? Y esto es una cosa que hasta ahora la mayoría de gente hemos pasado el tema, ¿vale?, pero a partir del año que viene va a haber una regulación europea nueva que nos va a corregir a todos y no cumplimos con... y no es coña. O sea, el líder llevamos meses cambiando todo el sistema para que sea accesible, porque a partir de 2024, bueno, hay una regulación nueva europea, el Bucack S2.3.0, ¿qué es esto de aquí? WCAC, que va a salir la nueva versión que nos va a aplicar, es cómodo de las cookies, todo el mundo va a tener que pasar por ahí. Total, lo único que como mínimo tendríamos que intentar hacer cuando diseñemos botones o textos que están encima de superficies de color es que haya suficiente contraste, ¿vale? El mínimo para textos, para que sea 2A, o sea, está el AA y el AAA, que es la de locos. Para que sea 2A, creo que es el contraste radio que pone aquí 1.8 en el mal y 8.8 en el bien, el mínimo creo es 3.1, lo digo de memoria, porque es 3.1. Hay herramientas, ¿eh?, para... yo utilizo un plugin, por ejemplo, en Figma, que es la herramienta que utilizo para diseñar, pero hay múltiples webs, el otro día encontré esta que me gustó bastante, en la que tú pones el texto que va a tener el color, hay el color que va a tener el texto y el color que va a tener la superficie y te dice el ratio de contraste que tienen y lo que me gustó es esto de aquí abajo, que te dice cómo de grande tiene que ser, dependiendo del tamaño de la fuente que utilices, por ejemplo, con estos dos colores, que son estos los de Lidl, ¿vale?, el azul de Lidl oficial, el hexa vaya, sobre blanco me dice que si quiero utilizar una tipografía así de fina, o sea, el 200 en CSS tiene que tener como mínimo 34 piscos de tamaño, si no, no es accesible. Si yo quise hacer el párrafo de este color, el párrafo que no lo voy a hacer, ¿no?, pero si quise hacerlo, por ejemplo, hemos dicho que el párrafo tiene que ser de 16, ¿no?, normalmente 16, pues no podría, tenía que ser 1650 o 15, si utilizará la 500, ¿vale?, que ya no es la regular, es la Volt, la Medium vaya. Y si quisiera hacer una fuente más pequeñita, tipo 14, que tampoco es tan pequeña, pero es pequeña, tendría que utilizar 700 ya, Volt, ¿vale?, si no, no es accesible. O sea, esto utiliza un algoritmo, que es el mismo algoritmo que va a utilizar la ley esta, Ada se llama, la ley, Ada, y bueno, va a utilizar este algoritmo, así que es muy útil. Y ya para terminar, quería hablar un poquito de Corner Radius, ¿vale?, o Boarder Radius, creo que se llama en CSS, ¿no?, en Android y tal, se le llaman Corner Radius. ¿Cuál utilizar? Es un poquito como lo de la series no series, ¿no?, pues un poquito dependiendo de cómo sea la marca, ¿vale?, yo siempre lo digo, o sea, si utilizamos, por ejemplo, un Corner Radius demasiado redondo, en muchos casos, sí que es verdad que se percibe, la mayoría de gente dice, utilizamos lo redondito que es más friendly, ¿no?, más amigable con el usuario, pero cuidado, porque si te pasas de simpático, no, es como, bueno, no encajo con la marca, ¿no?, y yo, por ejemplo, en una de las versiones, os he dicho que este año hemos estado rediseñando todo lo que es la World Leader y tal, una de las versiones se nos fue de las manos con el redondez y el director de marketing nos dijo esto, parecen burbujas, todo parecen burbujas, ¿no?, y el leader no es así, el leader tiene el logo cuadrado, etcétera. Entonces, por ejemplo, aquí os he traído unos ejemplos, globo, ¿vale?, si os fijáis, todo redondo en globo, ¿vale?, el botón es redondo, el buscador tiene también Corner Radius, las chips estas también, incluso el separador, ¿no?, hace una de esto de hola, las cosas redondas son amigables, pero también son baratas, ¿no?, globo quiere vender que es amigable y barato. Si nos vamos a un restaurante, en lugar de pedir comida en globo, nos vamos a un restaurante, como puede ser la Sarte, que es uno de los restaurantes más caros de Barcelona, todo es cuadrado, si os fijáis, el botón es cuadrado, las fotos son cuadradas, el selector de idioma es cuadrado, incluso esto que no se ve, es el típico botón la flechita de volver arriba, es cuadrado, ¿no?, cuadrado es elegancia, redondo es amigable, lo mismo ocurre con, por ejemplo, Wallapop, ¿no?, queremos comprar barato y vamos a Wallapop, todo redondito, ¿vale?, todo es muy amigable. Nos vamos a Tijani, ¿vale?, que una joya vale mil euros, todo es cuadrado, ¿vale?, los botones, las fotos, etcétera. Entonces, existe un equilibrio, ¿vale?, no es todo blanco o negro, existe, por ejemplo, bueno, Airbnb otra vez, siempre utilizo Airbnb, como podéis ver, porque me da tantos ejemplos, porque como está también diseñado, ¿no?, entonces, ¿qué hacen Airbnb o hacen un Mitch-Mitch, ¿no?, o sea, las fotos pueden ser cuadradas, los botones son redondos, ¿no?, o sea, lo que es interactivo es redondo, depende del sistema cada uno utiliza lo que quiere y que ya, por ejemplo, pues, tiene diferentes tipos de redondez, pero también combina cuadrado con redondo, dependiendo de tal. El tema es que yo no me complicaría, yo, por ejemplo, en la web que tenemos con Marta, utilizo todos los corneradios son el mismo, que es 4, ¿vale?, porque es eso, quiero que sea redondo, pero a la vez quiero que sea elegante, entonces es redondo, pero un poquito, solo, sutilmente, ¿no? Y si tenemos páginas complejas como, por ejemplo, esto de aquí, ¿no?, que es el Airbnb, el selector de cuando tú ya estás, que quiero reservar ese apartamento, tienes que seleccionar fecha, botón, no sé qué, que es un componente dentro del otro componente, ¿no?, tendríamos un componente general que es la tarjeta esta, pero dentro está el selector y el botón y tal. Ahí podéis hacer, si os veis en esta situación, podéis hacer combinaciones, por ejemplo, el Airbnb lo hace muy bien, porque pone el borde exterior 12, ¿vale?, múltiple de 8, recordad, y los bordes interiores 8, ¿vale?, con lo cual un borde que es más grande, o sea, cuanto más grande es el objeto, más redondo es, y cuanto más pequeño, menos. Si tuviéramos aquí, dentro del botón, alguna tontería extra, seguramente tendría 4 de redondo, de bordes rayos, ¿vale? Veis aquí también lo mismo, en la galería de imágenes, el componente principal, el contenedor tiene 12, y este botón que pone ahí mostrar todas las fotos tiene 8. Esto lo sé porque he inspeccionado, ¿vale?, como os he dicho al principio, inspeccionarlo todo. Y ahora sí, ahora después de haber, habéis comido toda esta chapa, ¿me sabríais decir qué fallos le veis al de la izquierda? Por ejemplo, muy bien, esto es una aberración. ¿La regla de alineación de los píxeles? Sí, sí, correcto, los espaciados. Y no hay ni 8 ni 4, bueno, todos quizás, pero... Sí, totalmente aleatorio. Veis como ahora sí que salen muchas unas cosas, sí, correcto, todo lo que estáis diciendo es correcto. O sea, el color accent, aquí hay mucho más. Claro, aquí por ejemplo este botón tiene lo mismo color que esto, ¿no? La fuente Serif, en la izquierda. La fuente Serif, muy bien. El intervinial. Muy bien, ahí hasta, creo que hasta 16 diferencias, ¿vale? Creo que hasta 16 cosas diferentes. Esto es lo he sacado de un post también de este señor, que es un crack de UI que yo sigo, y me ha apropiado de su ejemplo, ¿vale?, pero en su post está cada una las 16 cosas detalladas. Desde el contraste, por ejemplo, de esto de aquí, el estéper este de las imágenes que no se ve casi en la izquierda o en la flecha de atrás, hasta lo que todo lo que habéis dicho. ¿Vale?, y ahora sí, las cervecitas. Y bueno, si tenéis preguntas...