Y una cosa que creo que os puede venir bastante bien, porque una cosa que os cuesta, y sé que os cuesta porque me lo decís mucho, es el tema del diseño.
Y no pasa nada porque no somos diseñadores y es normal.
Pero hay veces que pequeños consejos, pequeños detalles, marcan un montón la diferencia.
Y hay un artículo, que es este, que me gusta mucho, que es del creador de...
Si no me creo, creo que es el creador de Tailwind.
Adam Wazan, creo que es el creador de Tailwind.
Vamos a ver, creo que es el creador de Tailwind.
¿Puede ser?
¿Tailwind?
Sí.
Trabajando en Tailwind.
No sé si es el creador o que trabaja en Tailwind.
¿Ves?
Adam Wazan.
Pues sí, sí, es el creador.
El creador de Tailwind, ya sabéis que tiene un libro que está bastante interesante, que se llama Refactoring UI.
Que es de pago el libro que, bueno, pues está a dinerito.
Yo creo que vale bastante la pena, si tenéis la oportunidad de echarle un vistazo.
Son como 200 páginas el libro.
Está muy bien, especialmente para programadores, porque te da unos trucos que si los sigues, pues te quedan bastante bien las cosas.
O mucho mejor de como nos suelen quedar.
Pero aún así, si por lo que sea no podéis encontrar el libro, no lo podéis adquirir o lo que sea, muchas veces ponen artículos donde hablan del libro y dan consejos también sobre cosas que hablan del libro.
Y este artículo tiene 7 consejos prácticos para utilizar de truco para tus diseños.
Lo he puesto, yo lo he resumido en mi cuenta de Twitter, lo he resumido al español.
Así que si queréis leerlo un poquito en español, es un resumen muy resumido, ¿vale?
Aquí lo tenéis, aunque no utilicéis Tailwind, no pasa nada.
Estos son ideas de diseño que no tienen absolutamente nada que ver con Tailwind.
Entonces, pues aquí lo tenéis en español, pero si no, tenéis el artículo en inglés, que obviamente tiene mucho más contenido.
Y está muy bien, por ejemplo, utilizar el color y el peso o el grosor de la fuente en lugar del tamaño.
Esto es un error que cometemos mucho, a mí me pasa mucho, que en lugar de utilizar el grosor o los colores, utilizamos el tamaño.
Entonces, ¿qué pasa? Que acabamos con una card que tenemos 40 tamaños diferentes.
Pues en lugar de eso, y fijaos que sí que marca mucho la diferencia, esto es como que estaría mal, entre comillas, ¿vale?
Fíjate que aquí, este 17 es más grande, pero fijaos aquí que lo pone negrita y se nota que esta card como que se ve un poquito mejor.
Son como ejemplos muy prácticos que os pueden ayudar un montón.
Por ejemplo, otro más, este. Este también yo lo he cometido mil millones de veces mal, ¿vale?
Y es utilizar los grises en fondos de color.
Pues en lugar de utilizar el gris, que se ve muy apagado, es cuestión de utilizar un color que sea de la familia del fondo, pero más clarito.
Luego, más cositas. Hay un montón.
Luego, este, el de las sombras, que esto os encanta y os pasa un montón.
El hecho de poner estas sombras que parece que tiene como polvo por debajo.
Y esta sombra no está mal porque a veces os pasáis con las sombras, ¿eh?
Pues aquí, fíjate que la sombra la mueve.
Aquí no hay sombra, es mucho menos perceptible la sombra de arriba.
Y aquí, un poco más perceptible. ¿Por qué?
Porque así lo que parece es que le está incidiendo la luz y queda mucho mejor, la verdad.
Luego, utilizar menos bordes. Esto también me pasa, a mí me pasa un montón, que utilizo bordes como para asegurarme de que se vean las cosas separadas.
Y en lugar de utilizar bordes, podéis utilizar fondos, podéis utilizar más espacio blanco.
Y aquí tenéis, como no se haría, ¿no?
Con demasiado borde, que al final como que causa mucho ruido a utilizar mejor los espacios, cambios de fondo y cositas así.
¿Qué más tenéis por aquí? El 5. Este también nos pasa muchísimo.
El de los iconos. A ver, el tema es que los iconos están pensados normalmente para ser utilizados con un tamaño en concreto.
Y normalmente los tamaños son pequeñitos, ¿vale?
¿Qué pasa? Que, no sé, nos encanta, a veces nos pasamos.
Los iconos están pensados para ser 32x32, 64x64.
Dios, cómo odio esta página.
Jodio esa página demasiado.
Esta es la que me gusta.
¿Veis? Estos iconos al final están pensados para ser pequeñitos.
Si tú los pones ya así, empiezan a perder un poco de atractivo, ¿vale?
Pero si encima los haces ya más grandes todavía, ya te das cuenta de que se ven feitos.
Se ven como raros, ¿ok?
Pues hay que tener en cuenta esto.
Fijaos este icono tan grande que se ve raro, se ve como muy bestia.
O este, ¿no?
A ponerlo aquí en chiquitito y lo pones dentro de alguna cosita, algún elemento para que se vea mucho mejor.
Pues ahí marca mucha diferencia.
Evitar que los iconos sean demasiado grandes o que no estén en un tamaño que es el adecuado.
Hay veces que hay iconos, por ejemplo, este icono se nota que está pensado para utilizarse en grande.
Y este icono no quedaría bien en pequeñito.
O sea, hay veces que hay iconos que sí que están pensados para utilizarse en grande.
Pero utilizarlo cuando tengas sentido.
Este también es muy interesante el utilizar algún borde con un color para destacar alguna cosa.
Esto también se puede hacer con notificaciones.
Mira, ¿ves?
Una notificación para llamar un poco de atención para que todas las notificaciones no sean exactamente igual.
Aquí para destacar en qué pestaña estás.
La verdad es que está muy, muy bien.
Y este también nos pasa un montón.
Este es un error muy común que todos los programadores cometemos porque nos encanta hacer botones de colores.
Entonces tenemos el botón de aceptar, el del error, el de advertencia, el no sé qué, un amarillo, uno verde, uno rojo, uno no sé qué, no sé cuánto.
Bueno, y aquí lo que habla es que no todos los botones necesitan un fondo.
Fijaos aquí que el que pone que está mal, aquí tenemos un botón con fondo, un botón con fondo, botón con fondo.
Tenemos como tres botones.
Y es raro porque si te das cuenta, el problema que tenemos aquí es que no sabes cuál es el botón más importante.
¿Vale?
O sea, tú vas aquí a destacar y te cuesta saber lo que se llama un call to action.
El call to action es cuál es el botón que tú quieres que el usuario clique o el que le va a dar más retorno, digamos.
O que a ti te interesa o que al usuario crees que le puede interesar más.
Obviamente, el que menos te va a interesar es este, el de despublicar, ¿no?
O sea, el de eliminar la publicación porque tú quieres que se mantenga esa información.
Así que normalmente vas a querer destacar el más importante para ti.
Luego, el secundario que le va a dar información secundaria.
Y el menos importante, pues lo dejas ahí que se vea, pero no hace falta ocultarlo.
Pero bueno, lo dejas ahí sin darle tanta importancia porque si no, fíjate que el Ampables tiene como de más importancia.
Bueno, pues este artículo está muy chulo, os lo recomiendo mucho, os puede ayudar.
Son pequeños tips, pero ya veis que todos tienen ejemplos.
Fijaos, todos tienen ejemplos.
¿Veis este?
De que hay muchos frameworks que os dan toda esta galería de botones y no hace falta, no hace falta que todos tengan colores.
Fijaos la diferencia de que algunos ni siquiera tienen borde y tiene sentido.
Lo ves con el Ampables, pues aquí lo mismo.
Pues dejarlo, aquí hay un buen ejemplo del cancelar, pues lo pones así.
Bueno, tenedlo en cuenta que no, no es Bifa, Bootstrap.
No es culpa de Bootstrap, ni mucho menos.
Esto lo hacen un montón de bibliotecas o de catálogos de componentes.
Bootstrap al final te ofrece la posibilidad, pero la idea es que tú utilices el que necesites y ya está.
No tengo absolutamente nada que ver con Bootstrap porque hay otros ejemplos de otras librerías que también tienen todas.
Los meses logré conseguir trabajo gracias a muchos consejos que vi en tus videos, Miguel.
Solo venía a dar las muchas gracias.
Muchas gracias.
Pues muchas gracias, Felipe Code, por pasarte.
Gracias por esos 500 bits.
Muchas gracias y felicidades.
Me alegro muchísimo por ti, de verdad.
De corazón, me alegro muchísimo.
Pues ahí tenéis los consejos, los tips para mejorar prácticamente en temas de diseño, que está muy chulo.