tenemos una invitada muy especial, una persona que sabe muchísimo de lo que habla cuando
hablamos de diseño. Hoy tengo el placer y el privilegio de estar acompañado de Chris
Busquets, Senior Product Designer de Automatic, la empresa que tiene WordPress, que tiene
Jepac, que tiene WooCommerce, que tiene un montón de productos. Así que le vamos a
dar la bienvenida a la buena de Chris. ¡Chris! ¡Bienvenida!
Oye, encantado de estar aquí. O sea, me encanta que estés aquí.
Te iba a decir justo lo mismo. Encantado de estar aquí porque es algo que habíamos como ido hablando
durante, no sé, años. Un montón de tiempo, sí, sí. Y nunca hemos podido. Y al final el otro día Chris
dijo, bueno, ¿cuándo lo hacemos? Y yo, lo hacemos hoy. Vamos, sin falta. Oye, qué bien, Chris, que te puedas
pasar. Y que mi primera pregunta para que la gente te conozca es que sé que tienes un blog, y lo sé
porque lo he leído un montón de veces, que se llama UI from Mars. Y entonces me gustaría que la gente,
para que te conozca, pues le presentes un poco esto porque yo creo que es algo, tu proyecto más
personal, aparte de que trabajas en Automatic. Sí, UI from Mars es mi blog sobre diseño. Lo empecé
hace seis años y escribo sobre todo lo que tiene que ver con diseño de producto digital. También
el porfolio, pero métricas, diseño de experiencia de usuario, interfaces. También hago entrevistas
a profesionales del sector. La última que publiqué es a un, en realidad es un profesor de inglés,
pero especializado en Product Designers. Entonces, les enseño el vocabulario que se necesita y todo eso.
Un artículo de la semana, newsletter, todo gratis.
Te hemos tirado la web.
No me extraña.
Te hemos tirado la web. Ya no funciona.
Está bien. Ahora me peleo.
Ah, mira, mira, ha vuelto, ha vuelto, ha vuelto.
Volverá.
No estaba respondiendo, no estaba respondiendo, pero se colgó durante un momento.
Es verdad que es que tienes una de artículos sobre diseño, UI y tal, que son súper interesantes.
No solo porque hay gente que dice, ah, no, es que a mí a lo mejor no me interesa el diseño.
A todo el mundo le tiene que interesar el diseño. Si eres frontend, te tiene que interesar.
Si eres backend, te tiene que interesar. No importa, porque al final si algo no es usable,
si algo no le entra por los ojos al usuario, entonces qué más da que lo hagas.
Exacto. Y eso es un poco mi guerra. Que parece que diseño sea como, no sé, los locos que vamos siempre vestidos de negro.
Allí como, no sé, haciendo cosas extrañas, pero en realidad es el diseño no funciona.
Ahí está.
Mal vamos.
Y os digo una cosa, los artículos que hace Cris son muy accesibles, de que cualquier persona los puede leer, puede entender.
Y no se trata de que os volváis expertos o expertas en el mundo del UI y el UX, pero sí que tiene cosas muy interesantes.
Mira, este es el de mi brújula para diseñar. Estaba muy, muy chulo, ¿no?
Como diferentes puntos que debéis tener en cuenta de cómo hacer estos diseños.
Mira, confía en tu equipo, piensa globalmente. O sea, que son cosas que al final podéis aplicar en cualquier cosa.
Y también tiene un libro, que es Diseño desde Marte.
Sí.
Qué bonita la página.
Gracias.
Me encanta la portada también.
Gracias.
Gracias. La hice con Astro, creo, esta.
Ah, ¿la página con Astro?
Sí.
Ah, qué bien. Oye, pues te quedó muy, muy bonita, ¿eh? Me gusta un montón la página y la verdad es que sí que se nota que aquí el diseño está bien cuidado, ¿eh?
Se nota.
También te digo que me ayudó mi mejor amigo, que es Frontend. Porque yo llego lo que llego, soy diseñadora.
Claro, claro.
Hola, Alejandro.
A mí me pasa al revés, o sea, que no pasa nada, Cris. O sea, a mí me pasa al revés, que soy programador.
Y llego donde llego con el tema del diseño. O sea, que no pasa absolutamente nada. Pues, Cris, aparte de que trabajas como Senior Product Designer en Automatic, que mi primera pregunta es, oye, ¿a qué se dedica exactamente un Senior Product Designer en Automatic?
Buena pregunta. Es curioso porque nunca sé bien qué contestar, porque si digo diseñar es como, vale, sí, diseñar.
Claro.
Muy bien. Eso ya se entiende.
Todo depende un poco del equipo, pero en mi caso, que trabajo en el proyecto de Newsletters, trabajo muy mano a mano con el equipo de desarrollo.
Frontend, backend, bueno, en realidad son más bien full stacks.
Juntos decidimos hacia dónde va el proyecto, los roadmaps, trabajamos. Trabajo muy mano a mano con el lead del equipo técnico.
Entonces, entre los dos definimos el producto. Yo me cargo más de la parte, obviamente, la parte de diseño, la parte de experiencia de usuario, flujos y demás.
Y el de la parte técnica. Entonces, entre los dos vamos dando forma al proyecto.
Porque es la única manera de trabajar bien. Entre diseño y desarrollo. Porque si no se hablan, es mal.
Sí, sí. Muy buen consejo porque la verdad es que muchas veces el problema es que hay el telefonillo roto en el que el diseñador directamente te da un Figma y te dice, tú haz esto.
Y el, ¿sabes? Y no hay una comunicación, sino que simplemente se envían productos entre sí. Luego el resultado, toma, este es el resultado. Y ya está.
Es el que es. Yo les digo mucho a la gente que diseña que hay dos diseños. El de Figma, que es perfecto. Y luego el que llega a implementación. Y es nuestra responsabilidad de que el que llegue a implementación se asemeje lo más posible al de Figma.
Exacto. Ahí está. Mira la de productos que tiene automática, que la gente se cree que son WordPress. Y tiene aquí Tumblr, que ya Tumblr, yo hace tiempo al menos que no entro.
Pero Jetpack, que este plugin lo petó en su momento. Woo, que sobre todo es conocido por WooCommerce y tal. Gravatar, que esto también lo reventó en su momento.
Akismet, que era para el tema del spam. Así que nada, un montón de productos. Pero también yo sé, Cris, que en tu haber también habías estado en una empresa muy conocida y muy querida por todos.
Puede ser.
Desaparecida ahora. Twitter.
Sí.
Twitter. Trabajaste en Twitter.
Es tu ley.
Antes de que la comprase Elon, ¿no?
Sí, exactamente. Cuando Twitter era Twitter.
Exacto. ¿Y qué tal por Twitter?
Me gustó mucho trabajar allí, pero el problema es que entré justo un mes antes de que Elon dijera que iba a comprar Twitter.
Entonces, esos meses fueron muy caóticos. Pero era una muy buena empresa.
Ostras.
De verdad.
Mal timing, ¿eh?
Muy bien. Terrible, terrible timing.
Ostras, qué mala pata. Mala pata. Bueno, ¿y qué pudiste más o menos?
¿Cuál era la idea de trabajar en Twitter? ¿Qué es lo que te tenías que enfocar? ¿Era más el de la web o era el diseño en general?
Estaba trabajando en el equipo que se encargaba de diseñar lo que es el home timeline, el diseño de los tweets y el detalle de los tweets, que es a la pantalla a la que accedes cuando haces clic o haces tap en un tweet, el detalle.
Pues en eso. Estábamos intentando optimizarla, mejorarla, los filtros, el orden del home timeline, que siempre genera debates.
Ostras, sí.
Sí, sí.
Pues justo estábamos trabajando en eso.
Qué penita, qué penita, porque al final, bueno, pasaron otras cosas. Pero bueno, una experiencia que te llevas, ¿no? Al menos.
Sí, no, además aprendí mucho porque fue mi primera empresa americana, trabajando en remoto para Estados Unidos, bueno, para San Francisco, mejor dicho, y al principio fue un reto.
Corto pero intenso, ¿no?
Sí, creo que voy a empezar a definirlo así.
Corto, pero intenso. Pues Cris, si te parece, le vamos a dar cañita. Venga, vamos a darle cañita. Vamos a ver aquí los proyectazos de la comunidad.
Empezamos con PeterRamirez18, UI, UX Design, Frontend Developer, Motion Graphics. Tenemos aquí, pues hay unos proyectitos. La verdad es que me gusta, me gusta. Está bien. ¿Cómo lo ves, Cris?
Esto lo veo bien.
Está bonito, ¿no? Bueno, yo creo que un problemilla es la imagen. Y esto suele pasar cuando se optimizan imágenes en un formato un poco, sobre todo los negros, y claro, queda un poco raro. Yo aquí intentaría optimizar la imagen de otra forma.
Lo que me gusta es que parece que tiene su propia identidad con la paleta de colores, tiene una buena jerarquía también. No tiene texto justificado, parece ser, en las cards. Tampoco me cae bien el texto justificado.
Uf, menos mal. Menos mal, menos mal. Llegas a venir aquí. Senior Product Designer.
Y me dices, a mí me encanta todo justificado y me matas. Lo sabes que me matas, ¿no?
Sí, sí.
Me matas más que nada porque entonces la comunidad va a empezar aquí con las bromas de Midu se lo inventó, esto es el texto justificado.
¿Para qué hablas de diseño si no sabes?
Sí, sí, sí. Tal cual, tal cual.
Tal cual. Bueno, pero una cosa que tienes razón, ¿no? El tema de que la imagen, el color y eso, pues que está bastante bien.
Yo hay una cosa que a mí personalmente, este soy yo, que soy un poco tiquismiquis con algunas cosas y lo reconozco.
Y el tema de los iconos. El stroke es súper importante porque muchas veces cuando tienen los iconos, tienen un stroke incorrecto, se ven como muy vastos.
Por ejemplo, este de LinkedIn se ve como muy bruto o este del filtro se ve como muy bruto, que yo creo que si los tuviera un píxel menos quizá, ya quedaría un pelín menos bruto.
Por ejemplo, se ve también este de muy forzado, el de Tailwind. No parece ni el logo original.
Honestamente no lo veo mal, pero por el simple hecho de que todos son consistentes. Porque muchas veces pasa que los iconos tienen como borde diferente grueso, algunos tienen color, otros no.
Y estos en este caso son súper consistentes. Lo que decías del grueso al final es tema de gustos. Para mí es más importante la consistencia que no el...
Ahí voy a estar súper de acuerdo. Totalmente de acuerdo. Prefiero que al menos sean todos igual, que no el hecho de que empiece a haber uno de una forma, otro de otra.
Pero si tuviese que decirle algo, yo apostaría porque todos sean de uno y medio. Sobre todo es que el problema está con los logos originales, que cuando se esfuerzan tanto ya no aparecen ni los de verdad.
Por ejemplo, el de Tailwind se ve ahí un poco raro y tal. Pero bueno, no pasa nada. Al menos es verdad que son consistentes.
Eso lo compro, el argumento de las marcas.
¿Cómo ves el tema de primero proyectos y luego experiencia? ¿Cómo pondrías tú esto? ¿Primero una cosa u otra? ¿Cómo lo ves? ¿En tema de escaneo de información? ¿Qué crees que debería ir arriba o abajo?
Si puedes hacer scroll arriba, lo que me despista es a cuatro cosas a la vez. O sea, UI, UX, Frontend y Motion Graphics.
Pero no me da mucha información de hacia dónde prefiere dedicarse. Quizá tendría sentido utilizar parte de la experiencia para hacer un resumen aquí.
O priorizar, tipo Frontend Developer con interés por el revés.
Entonces, a lo mejor, claro, si tiene experiencia, que además parece que tiene experiencia sobre todo como Frontend Developer o siempre ha tenido como Frontend Developer,
pues a lo mejor sería interesante decir con cuatro años y además aquí arriba poner cuatro años de experiencia como Frontend Developer con interés o también trabajando en tal, ¿no?
Y más secundario.
Sí, suele funcionar muy bien porque cuando ves el portfolio por primera vez te haces una idea de qué tipo de perfil tiene, porque si no solo estás listando profesiones.
Y si tú como empresa estás buscando Frontend con sensibilidad en diseño, pues seguramente te entra más una frase en la que expliques eso que no un listado de profesiones o habilidades.
El resumen, hacer un resumen.
¿Poner los proyectos? ¿Crees que primero proyectos o primero experiencia? ¿Sabes? Porque aquí abajo del todo ha puesto la experiencia.
Que también como que termina un poco abrupto, ¿no? La página es como que experiencia, ¡pum! Ya no hay más, ya no se puede scrollear más, hasta aquí.
Y queda como un poco raro porque, no sé, no hay un cierre en la página, ¿no?
No, eso es verdad. Le falta un footer, aunque sea para poner su nombre otra vez, copyright, y los enlaces de las redes o algo.
Exacto. Algo, algo, algo, ¿no? Para decir adiós. También es raro. No entiendo muy bien esta... Porque normalmente esto, este punto y tal, como que te ayuda a hacer como un historiograma.
No sé cómo sería la... Pero como una cronología, ¿no? Pero aquí en medio como... Es raro porque no entiendo... Arriba a la izquierda está como el más viejo.
Lo cual es raro porque debería ser el más nuevo. Sí, está al revés. Sí, está como al revés.
Sí. Yo, el último este... O sea, el último, el de 2023, que es el más reciente, lo pondría arriba a la izquierda para que sea el primero que la gente ve.
Que es el más interesante, ¿no? Sí, quizás se podría espaciar más, tipo ponerlos... Sí, como un poquito separados entre sí, ¿no? Que no estén a la misma altura.
Sí, sí, estoy de acuerdo. Para que vayan como primero uno, luego un poquito más abajo el otro y tal.
Y entonces tendría más sentido esta cosita que ha hecho aquí. Sí, sí. Sí. Muy bien. Pues... Oye, pero la parte de proyectos es muy bonita, ¿eh?
Me gusta mucho así este diseño y el hover y tal. Bien, bien. Y además que cambia... Me gusta mucho como muestra la imagen.
Sí. Está como difuminada, luego se hace grande, se nota. Todo es clicable. Eso me ha gustado mucho esta parte, la verdad.
Vale. Últimas palabras para Peter. Contestando lo que decías. Sí. Primero experiencias, después proyectos.
Personalmente considero que es más relevante poner primero los proyectos que no la experiencia.
Porque puedes tener experiencia de años y que tus proyectos no sean buenos. Y al revés.
Yo en este caso siempre digo que si eres una persona en programación que tienes experiencia real, yo siempre digo que primero experiencia.
¿Por qué? En programación como que la experiencia te abre muchas puertas.
Si tú has trabajado durante dos o cinco años en programación, como que tira mucho más que hayas hecho un proyecto.
Es verdad que a lo mejor el mundo de UX es diferente, pero si no tienes experiencia, es mucho mejor que pongas un buen proyecto arriba.
Pero, ¿sabes? Es complicado, complicado.
Sí, supongo que es diferente a diseño, que en realidad es lo que sabes hacer.
Claro. Sí, sí, sí.
Que es más fácil mostrarlo.
Sí, por eso. Yo creo que en diseño sí que pondría los proyectos, porque además pueden ser proyectos muy de clientes.
Que sueles tener más de un cliente. Y sí que enseñan proyectos porque son más laborales.
Pero sí, yo creo que muchas veces depende. Aunque en programación normalmente la experiencia es mucho más fácil que llame la atención si la pones arriba.
Pero es verdad que muchas veces depende.
Vamos con Germán.
¡Hostia!
¡Guau!
A ver, venga, nada más entrar.
¿Qué tal, Cris?
Es que tengo mi propia guerra con los loaders.
¡Ojo! ¡Ojo! ¡Bien! ¡Me gusta!
Hoy he traído a Cris. Cuéntame lo de los loaders.
Muchas veces no son necesarios. Y si son necesarios, lo importante es que ten información relevante para el usuario.
Ponerlos porque sí, sin que tenga sentido con el producto, con la marca o con lo que quieres transmitir, es muy extraño.
Además de que haces que el usuario entre más lento en la página web y pierdes...
A ver, navegamos muy rápido.
Una página web, idealmente, debería ser muy rápida en mostrarte la información, en mostrarte lo que estás buscando.
Añadir una carga inicial, además, hace que te tengas que esperar.
¿Qué piensas? Vale, son 30 segundos, no. 5 segundos.
Pero te tienes que esperar.
Tampoco es que haya cargado un vídeo de fondo que pueda pesar mucho.
Claro. De hecho, lo peor es que entras, aparece esto, pero aquí se ve que está todo cargado ya.
Sí.
Lo que está haciendo esperar al usuario es necesidad.
Sí.
Y además que la información como que pasa por tus ojos demasiado rápido, que a mí como que me estresa un poco.
Nada más entrar a la página como... ¡Hola! ¡Pum! ¡Pum! ¡Pum! ¡Pum!
Demasiados estímulos ahí como... ¡No sé!
Sí. De alguna manera esperaba que los mensajes estuvieran relacionados tipo hola, soy frontend, bla, bla, bla.
En lugar de saludar en cuatro idiomas, que también es curioso.
Que me imagino que son los idiomas que sabe.
No sé por qué.
Espero.
Me voy a imaginar eso porque si me dices, no, no tengo ni idea de esos idiomas, entonces ya sería muy raro.
Bueno, pues aquí tendríamos... Esto sería como la landing.
No sé cómo ves así, nada más entrar, cómo ves esto.
Voy a decir una frase que odio, pero le falta diseño.
Ponle más diseño, ponle más diseño.
¡Ay, qué risa! Ponle más diseño.
A ver, es verdad que estoy de acuerdo contigo que como que claro, es que aquí tenemos este hueco.
Claro.
Que da un poco como desaprovechado cuanto menos.
Sí.
Claro, que da raro porque dices, ostras.
Y muchas veces, no sé qué opinas, claro, encima luego bajas y esto está así.
Yo una cosa que digo a veces, Cris, es, oye, no intentemos hacer, si nos cuesta el diseño, porque nos falta diseño, pues no intentemos hacerlo todo el ancho del monitor.
Porque es que a lo mejor hacemos una web que sea muy chiquitita, como aquí, fíjate que aquí han hecho esta experiencia aquí chiquitita.
Y seguramente, si todo fuese centrado hacia eso, pues a lo mejor quedaría cookie, porque ya no tienes tan desperdigado toda la información, ¿no?
Sí, estoy de acuerdo.
Sería como usar lo de las bento box, pero en lugar de muchas, una.
Exacto.
Ir encajando cajas una debajo de la otra y ya está.
Exacto.
Y siempre con el mismo ancho, porque claro, aquí, como que es raro también que lo poco que tiene, aquí ya está cada uno en un extremo.
Este está aquí como a la izquierda, pero de repente esto está centrado, entonces luego aquí otra vez y va cambiando así constantemente, ¿no?
¿Qué te parecen las animaciones?
En general.
Sí, fíjate que, o sea, aquí bajas, te apareces, subes, desaparece. Este tipo de animaciones...
Suelo preferir, pero obviamente es opinión personal, las microanimaciones, en el sentido de que sea un hover,
que sea un efecto en una etiqueta, en un icono, no en el contenido en sí mismo.
O sea, si por ejemplo en este caso hubiera imagen y texto, tipo una descripción del proyecto, quizá tendría sentido animarlo.
Pero más texto me refiero, tipo título, descripción, tal.
Así que quizá podrías hacer como, vale, la imagen y luego aparece el texto o al revés.
Pero en este caso no sé qué aporta. O sea, es bonita.
Sí, no está mal, la verdad es que de animación no está mal, aunque yo creo una cosa de las animaciones que yo considero que sí que es importante a nivel de página web
es que una vez que aparece, que no vuelva a ocurrir, ¿no?
Porque a mí el hecho de que vuelvas a subir y vuelva a desaparecer es como, ya la he visto una vez, ¿sabes?
Que no hace falta que vuelvas a...
Pero bueno, tampoco es muy grave dentro que cabe.
Lo que sí me parece importante que estoy mirando es que tiene muchas faltas de ortografía.
Entonces, amigos, por ejemplo, e-commerce hay que escribirlo bien.
Si no, es muy raro. Página, página, tiene acento la A.
Esto que parecen pequeñas tonterías, en realidad muy importante porque es la visión que va a tener la gente de vuestro trabajo.
Y pues una persona que sea pulcra, pues no va a tener falta de ortografía.
Aquí estos ejemplos también, esto de que cada uno tiene un tamaño diferente,
este color, este gris es diferente al otro.
Estos son detallitos que también hay que tener en cuenta.
Y luego aquí, la accesibilidad un poco complicada.
Eso iba a decir, que creo que hay un timita de accesibilidad.
Pero incluso con el texto, ya no solo los iconos.
Sí, sí, con todo.
Y de hecho, esto...
Bueno, claro, aquí porque...
Aquí le pone un Counter-Rash 4, que yo...
Creo que era menos.
Pero fijaos que aquí ya os lo dice, que dice...
¡Eh! Está prohibido esto.
Y solo con que lo mováis, pues aquí...
Hostia, no sé por qué ahora se ha vuelto ahí un poco loco.
Se ha vuelto loca la pantalla.
Se ha vuelto tarumba.
A ver si soy capaz de arreglarlo.
A ver.
Pero básicamente aquí, si le dais, ya os dice el Counter-Rash, ya veis que está mal.
3,8.
Vale, 4,5.
Vale, ahora tiene más sentido.
Y al moverlo, ¿vale?
¿Veis?
Os dice dónde se vería bien.
Pues está más o menos aquí, que no se ve.
Veis aquí que casi no se ve.
Lo movéis donde tiene que estar.
Este sería el mínimo, pero el recomendado estaría aquí.
Y ahora sí que se nota mucho más la diferencia, ¿vale?
Otra cosa que añadiría es la de buscar tipografías con más legibilidad, quizá más digitales.
O sea, no tanto una serif, porque son como que cuestan de leer.
Y en el caso de las etiquetas es extraño que estén en serif.
Normalmente son mayúsculas y sin serif.
Sí.
Esto, una vez lo dije y tuve una pelotera aquí con la gente también.
Que ya dije que las serif no están pensadas para leer.
Que para un título, pues puede estar bien, porque al final es un texto muy corto, muy grande y tal.
Pero para utilizarla en el texto pequeñito general...
En este caso se le iría mejor sans serif.
Mayúsculas y seguramente tamaños más grandes, porque la jerarquía tipográfica también está un poco extraña.
Sí, como muy pequeñita, ¿no?
La letra aquí es muy pequeña.
Además es como demasiado poco texto.
Página de venta de joyería.
Bueno, parece más el alt de la imagen que una descripción en condiciones de proyecto.
¿Qué hiciste?
Yo creo que a veces, en lugar de poner tanta etiqueta aquí, pues igual también desarrollar un poco el texto.
Exacto. Desarrollé una página web con Tailwind, utilizando tal, que esto me permitió, no sé qué, no sé cuánto, angular y optimicé y no sé qué.
Más que incluso poner etiquetas así, que quedan como muy de cualquier forma.
Que están bien, ¿eh? A mí me gustan las etiquetas, pero que te pueden ayudar a desarrollar un texto aquí en condiciones.
Que no tengáis miedo de escribir.
A veces a la gente le da vergüenza escribir.
Quizá quedaría mejor las etiquetas y los enlaces con el texto.
O sea, todo junto como un bloque encima o debajo de la imagen.
Claro, en lugar de...
Claro, es que queda tan...
Es que la imagen también está muy separada.
Claro, es tan grande la imagen.
A lo mejor le quedaría bien dos columnas también, para no tener que hacer la imagen tan grande, ¿no?
Como hemos visto en otro proyecto.
A ver, ¿qué tal, Cris?
Me ha venido otra vez a la mente lineal, pero es más por el degradado que otra cosa.
Está en todos los sitios el degradado.
Sí.
Lo que más me ha llamado la atención, y aquí está mi sesgo, es la imagen en 3D.
Creo que jerárquicamente está como mal compensado.
En el sentido de que lo importante parece lo de, has soñado con tu sitio web, como si fuera el claim principal.
Pero lo primero que lees son los pilares de mi enfoque.
Entonces, quizá lo haría al revés.
Yo creo...
Yo voy muy por ahí.
La verdad es que esto, como que para mí, si esto es importante, es como que debería ir un poquito más grande también.
No sé, algo más grande.
Que también es raro el soñado que tenga una mayúscula ahí en medio.
No entiendo muy bien.
Como que le rompe la frase, ¿no?
Sí.
O si la quiere...
Si soñado tiene que ser importante, más que ponerle una S mayúscula, a lo mejor le pondría un colorcillo o alguna cosa, ¿no?
Sí.
Y a mí esto como que me distrae, ¿no?
Este, yo puedo planificarlo, yo no sé, como que tiene demasiado peso y no se ha presentado, si te fijas, ¿no?
O sea, como que no sé a qué se refiere todo esto.
O sea, ¿quién es esta persona?
Es verdad, no hay nombre.
Sí que está la sección del sobre mí en la navegación, pero en el primer...
Sí, sobre mí.
Ahí lo tenemos.
No hay nada.
Y aquí lo que decías, totalmente de acuerdo también, no sé, que una separación más...
Algo más...
Sí.
¿No?
Como que está demasiado apagado lo de los pilares.
Sí.
También es complicado.
Los bordes es una cosa complicadísima, ¿eh?
Porque esta separación aquí...
Sí.
Yo creo que la quitas y queda mejor.
Yo es que en realidad quitaría el borde, bueno, esta línea y lo del step.
O sea, quitarías el borde...
A ver si encuentro el borde...
¿El borde este?
Sí.
Y el texto de step.
Y todos estos...
Vale.
Bueno, podemos hacer así...
Pues sí, ¿eh?
Yo creo que mejor.
Es que a veces menos es más, ¿eh?
Sí.
Con un poquito de...
Ahora tendríamos que quitarle un poco de margin.
Sí.
Pero yo creo que con esto como que se veía mucho mejor, ¿eh?
Para que veáis un poco la comparación.
La teníamos así, que era como estaba antes, y así como la hemos dejado.
Y ya...
Cambia.
Creo que sí que...
Sí.
Sí, es que tiene menos cosas y hace que la información
sea un poquito más clara, ¿no?
Y que se le da mucho mejor.
Aquí es que el problema es que los bordes...
Los bordes distraen y tal.
Pero sí, sí, lo veo mejor.
Ahí normalmente hay un problema con los elementos gráficos que es...
No deberíamos ponerlos porque sí.
O sea, deberían tener alguna función.
Sí que está bien ornamentar, digamos, de alguna manera.
Pero, por ejemplo, la línea que veía antes no tenía sentido.
Porque no queda claro que se para.
La que teníamos encima del step 1, 2, 3.
Estas también las quitaría.
Claro, yo creo que estos también los quitaría.
Yo tengo como una regla en mi cabeza.
Que es mejor utilizar separación que un borde.
O sea, siempre que puedas utilizar separación en lugar de un borde, hazlo.
Porque los bordes, mi sensación, es que siempre generan...
¿Ves?
Es que se ve mucho mejor.
Ya está.
Ya está.
Se ve mucho mejor.
Que puedes tener bordes...
Bueno, claro que puedes tener.
Pero cuanto menos los uses, mejor.
Si puedes tener una separación que aquí ya la tienes de forma natural, pues perfecto.
Totalmente de acuerdo.
Hay un tema de la tipografía de arriba.
Es que si no lo digo arriba.
Esta, ¿no?
Aquí.
Sí, que tiene como un letter spacing raro.
Dicho, no voy a decir nada porque no me gusta ni el light height, ni el letter spacing, ni nada.
De hecho, no voy a decir nada que luego voy a ser yo aquí el...
Pues dilo, Cris, dilo, dilo.
Sí, el letter spacing está modificado.
Normalmente las tipografías no necesitan que se modifique eso.
Porque ya están diseñadas para leerse bien.
Claro.
Tal cual.
Si el objetivo es que llame más la atención, ¿es suficiente con incrementar el cuerpo del texto?
Y ya está, en lugar de como hacer las palabras más anchas.
Sí, además que se ve bien el texto.
Sí.
Se ve así como que tiene una cosa rara.
Le pasa algo.
Sí, le pasa algo.
Le pasa algo, exactamente, ¿no?
Y de repente, pues dices, bueno, pues utiliza la...
Si se lee bien la letra, ¿no?
Sí, sí, sí que es raro.
Sí que es un poco extraño.
Pero bueno, yo creo que así, pues ya ha quedado bastante más limpio.
Yo creo que a partir de aquí puede tirar.
Los proyectos creo que se muestran bien.
Este sobre mí.
Bueno, de hecho, Midu, contrátame y mi pago será tu venturía.
O sea, fíjate, hay gente dando mensajes sutiles.
Mira, voy a hacerte una pregunta un poco...
No es tanto de diseño, pero bueno, sí que tiene que ver.
Mira, aquí está el copyright.
Vale.
Copyright 2024 Kennedy Almonte.
Que es una cosa curiosa porque le encanta a la gente poner el copyright.
Pero lo cierto es que Kennedy, este porfolio, creo, que, por ejemplo, esta parte...
Se parece un poquito.
Sí, que se parece un poco, ¿no?
Sí.
Este lo hicimos aquí en directo como un ejemplo de porfolio, ¿vale?
Vale.
No tiene cosas, ¿no?
Ha pillado cosillas y tal.
Y ha puesto aquí el copyright.
Esto, ¿cómo lo ves tú, esto de poner copyright cuando te has basado en otros diseños?
Ya, es que en realidad copyright de qué.
Esa es la pregunta de siempre.
¿Copyright de qué?
O sea, si es un libro, si son artículos, si es contenido de este tipo, tiene sentido.
Pero si es un porfolio...
Sí, es raro.
Se me hace como extraño.
Es raro.
Y en realidad, si la referencia está en otra web, que además era, como decías, un curso,
quizá tiene sentido añadirlo.
De hecho, cuando ponen como todos los derechos reservados, queda todavía más raro porque dices,
hostia, vale, y hasta los logos son tuyos, ¿sabes?
Que te van a buscar, ¿eh?
Es que si ponemos copyright, deberíamos empezar con los copyright de las marcas.
Claro.
Y empezar a ponerlos abajo.
Sí, sí, tal cual.
Este me suena que también utiliza como referenciado de tu curso, ¿puede ser?
Sí, se parece, ¿tiene alguna idea?
No, vale.
Se parecen tanto ya todos que...
Ya, está mucho hacer porfolios diferentes.
Mira, si comparamos con el primero que hemos visto, aquí por lo menos pone que es ingeniero,
un año como desarrollador.
O sea, te cuenta un poquito más la historia.
Tienes acceso al correo, a GitHub, y pone la etiqueta de disponible para trabajar,
que eso queda como súper claro.
Y lo que me confunde un poco es la navegación, porque tiene muchas cosas y seguramente unas
podrían ir dentro de otras.
Sí, ¿verdad?
Sí, como...
Tiene como demasiadas aquí.
Además, todas pegadas.
Sí.
Un problema como que ya detecto nada más entrar es la falta de separación de cosas.
Sí.
Todo está pegado.
Los elementos estos están pegados, esto está demasiado pegado.
Aquí está tan pegado que en lugar de hacer un salto de línea aquí, todo está como pegado, ¿no?
La navegación seguramente se puede simplificar, porque proyectos y experiencias quizá puede ir junto,
pero eventos, habilidades, sobre mí, estudios...
O sea, estudios y sobre mí.
Sí, participación en eventos.
Yo no sé si esto es tan importante y encima ponerlo encima de proyectos.
Exacto.
Me parece como muy secundario, ¿no?
O sea, participación.
Que puede ser, o sea, yo entiendo que le guste.
Sí.
Pero como que la gente a lo mejor, no sé, presentación de la primera etapa de una herramienta en un evento de la universidad.
O sea, está bien, es un logro, pero me parece más interesante los eventos a lo mejor.
Y lo que dices, ¿no?
Pues juntar cositas o no poner.
O sea, a lo mejor dejas aquí los estudios, pero lo que dices tú, ¿no, Cris?
Este estudio, pues lo quitas.
Para que la gente no le dé clic, porque total, ¿qué más da?
Es que al final normalmente un porfolio tiene dos o tres secciones, proyectos, sobre mí.
Y dentro de esas cajas tendría que ir el resto de secciones.
Claro.
A lo mejor las habilidades puedes agruparlo dentro del sobre ti.
Sí.
La experiencia, pues un poco con los proyectos que vaya junto.
Exacto.
Y simplificar la navegación, porque en este caso seguramente podría ser inicio, experiencia, sobre mí, contacto.
Ah, mira.
Cuando se hace pequeño aparecen iconos.
Hostia, ¿qué opinas de los iconos?
Eso es...
Porque hay demasiados iconos aquí, ¿eh?
Hay demasiados iconos y el problema de los iconos sin texto, que los acompañe, es que hay veces que son difíciles de entender.
Claro.
Pues si solo ves, o sea, ¿cuáles eventos?
Claro.
O sea, ¿sabes qué es esto? Porque has visto el...
Sí, sí, lo he visto.
No lo hubiera entendido antes.
Sí, sí.
Sí, está claro.
Los iconos son un poco problemáticos porque no se suele entender muy bien a qué se refieren.
Y pueden ser un poco raros.
Pero mira, vamos a simplificarlo para que lo vea rápidamente.
Habíamos dicho experiencia, habilidades yo también lo quitaría, el de estudios también lo quitaría.
El de idioma lo podemos dejar, pero habíamos dicho a lo mejor proyectos.
¿Lo habíamos dicho?
Sí, oye, experiencia y proyectos debería ir junto, sí.
Sí, que se podría poner junto.
Y aquí...
Ah, bueno, que veo que aquí lo he puesto con inline.
La madre que me parió.
Porque, no sé por qué...
¡Hostia!
Me lo he cargado.
Y voló.
Así que voy a quitarlo.
Y voló.
A tomar por saco.
Así que voy a quitar eso y ¡hala!
Me lo he cargado.
No sé por...
Ahora, ahí está.
Entonces esto ya te permite al menos tener un poquito más de separación.
Que también, además, flex detection...
No, flex...
¡Coño!
Ahora estoy pensando en Tailwind y me está costando...
Flex...
No, Justify...
¡Joder!
Vale, no sé por qué.
Porque no sé cuál está utilizando.
Pero que estaría bien separarlo.
Porque aquí, esta separación es muy pequeñita.
Estaría bien separarlos.
Y si no, lo podríamos hacer con un padding.
Podríamos poner un padding...
Un poco...
Solo...
Así.
Cuatro...
Ya, mejor, algo así.
Y esta sería un poco la diferencia.
Que ya se ve...
También los botones también deberían tener un poquito más de padding.
Sí.
Pero bueno, ahora ya no es tan abrumador, ¿no?
Que nada más entrar tienes todo esto...
Bueno, pues esto lo simplifica bastante.
Y lo agotas donde tenga que ser y ya está.
Si lo separas un poquito ya de la parte de arriba de la pantalla,
porque está enganchadísimo...
Ya está.
Vale.
Pero si no cuesta...
También cuesta detectar la navegación cuando está tan enganchada.
Ya.
Sí, que a veces como que queremos...
Sí, es verdad que...
Como que está muy, muy, muy pegado.
Demasiado arriba.
Además, los espacios...
¿Qué es eso?
Que le falta aquí unos espacios aquí en medio.
Sí, esa jerarquía.
Sí, este 1 que queda aquí, pues habría que bajarlo para que sea junto y todo esto, ¿no?
Vale, pues Francisco, ahí tienes unas cuantas cositas.
Este me gusta.
O sea, tiene buena jerarquía.
Los iconos son consistentes, que es lo que habíamos dicho al principio.
La navegación también está simplificada.
Inicio, experiencia, proyectos.
Sí, bien, ¿eh?
Que justo lo que acabamos de contar, me encanta, porque justo lo que acabamos de decir, pues
aquí lo tenemos, súper simplificado.
¿Te imaginas que Kewin lo ha escuchado y rápidamente se ha puesto ahí?
Sí, sí, sí.
Sería buenísimo.
Mira, qué bien este call to action, ¿eh?
Ahora.
Se ve muy poco en el porfolio, se ve muy poco el call to action.
Sí, y está súper bien pensado porque además ocupa poco, llama la atención y tienes aquí
pues para contactar directamente, que lo tienes cerca de proyectos, lo tienes justo después
de la experiencia, está bastante bien.
Está muy bien posicionado porque está justo entre los dos bloques de contenido, experiencia,
call to action, proyectos.
Me gustaría que fuesen un polín más grande los botones, porque como que me parece un
poco descompensado, ¿no?
Este, y esto como que, ah, me gustaría un poquito más grande, pero bueno, me gusta,
me gusta.
Vale, aquí los proyectos, las tecnologías, mira, recomendaciones, bueno, bastante completo,
la verdad, con recomendaciones que no las habíamos visto todavía.
¿Cómo ves el tema de poner recomendaciones en un portafolio?
Fíjate que yo tengo en, yo tengo en LinkedIn y cuando aplico a un trabajo con el currículum
siempre adjunto cartas de recomendación, porque al final tú puedes decir, Misa, de trabajo
súper bien, trabajo muy bien en equipo, todas esas cosas, pero es como que si tu candidatura
va respaldada por alguien, como que le da un poco más de peso.
Obviamente también se lo puede inventar, pero vamos a suponer que la gente es legal y
no se inventa esas cosas.
Sí, bueno, pero sí, es verdad que está bien, ¿no?
Que alguien te, una referencia, ¿no?
Y al final es muy fácil buscar a esta persona en LinkedIn y ver si existe.
Claro.
Todo esto.
Vale, pues alguna cosa más.
Yo lo que veo son los colores.
Es que el gris es complicado, ¿eh, Cris?
Es muy complicado.
Porque mira que me gusta en general, pero estos bordes grises, como que de repente,
viendo que tiene este azul para destacar, de repente este gris o más abajo, incluso,
bueno, este no me preocupa tanto, pero este sí, ¿no?
Este de aquí, con todos los bordes.
Lo que haría es o hacerlo en blanco y bajarle la opacidad para que se mezcle con el azul de
fondo en este caso.
Claro.
O utilizar el propio azul, digamos el azul del color primario y bajarle la luminosidad.
Claro, o sea, una cosa sería con el blanco bajarle la opacidad, que bueno, queda un poquito
más o menos.
Pero al final, estos bordes tampoco son tan relevantes.
Sí, sí.
Que se vean un poquito y se vean bien integrados.
Sí.
Ya cambia.
Sí.
Cambia un poquito.
Claro, me gusta eso, ¿no?
Que se vean como mejor integrados en el fondo, en el color y tal, con un poquito de azul
para que no quede tan apagado, porque como que cambia un poco respecto y además con el
título y tal, y que así destaque un poco más el… que le pasa un poquito lo mismo
aquí, ¿no?
Con este gris y eso.
Que ya puede jugar con el azul todo el rato y así darle un poquito más de vidilla.
Pero por lo demás, muy bien, súper completo.
Además, todo este texto aquí, la experiencia, muy bien que arriba está el último.
Muy bien, muy bien.
Sí.
Además, me gusta que detalle lo que ha hecho, que eso tampoco se ve mucho.
Porque listamos los cargos y listamos las empresas, pero es en plan, vale, ¿y qué
has hecho?
¿De qué te has encargado?
Lo que hay que pasarle… hay que pasarle el corrector, ¿eh?
Desarrollé, acepto en la E, estas cosas son importantes.
Y es un momento, pero si tú lo pasáis a…
Sí.
Bueno, no sé si… es que hay… yo que sé, hay veces que me dicen, no, es que en mi país…
Pero no, módulo tiene acento seguro.
Es que yo que sé, hay veces que algunos verbos no tienen acento, pero no, no.
Aquí sí que hay algunos que se los ha saltado, ¿eh?
Hay algunos que sí que tienen acento, por lo que veo, pero otros…
Sí, hay algunos que están, como el de diseñé.
Sí, sí, o sea que diseñé y desarrollé.
Pero desarrollé no.
Exacto, ahí está.
Pues echarle un vistazo, que eso es importante.
Pero muy bien, ¿eh?
Que win, me gusta.
Mira, aquí tenemos el responsive.
Ah, no, bien.
Se comporta el responsive.
Que win, bien, bien.
Hice la página como hace dos años en React y espero actualizarla en alguno de estos días
que tenga tiempo.
Bueno, eso es lo que nos prometemos todos.
Venga, tu blog favorito, Cris.
Es el clásico de los porfolios de… ya lo actualizaré.
Sí.
Y la vida pasa y no se actualiza.
Mira, se mueve el muñeco.
Lo estoy moviendo yo, ¿eh?
Con las teclas.
Ah, vale, vale.
Sí, sí.
O sea, es como un juego.
¡Hostia!
Ay, lo he interrumpido.
Me da algo.
Sí, o sea, es así.
Pone loading con los puntos suspensivos y aquí de repente pone muéveme de izquierda a
derecha con las llaves.
¿Vale?
Vale.
Ah, vale.
Y está el scroll for more.
Sí.
Entonces podemos scrollear y, ojo.
Ay, la navegación horizontal.
Sí.
Navegación horizontal.
Aquí va apareciendo texto.
Vale.
La verdad es que muy pixel art.
Me gusta eso que es pixel art.
Vale.
Developer, experience.
Hostia, aquí como que no llego a entender muy bien.
Ah.
Hostia.
Developer, present day.
Vale.
Se supone que va de izquierda a derecha.
Vale.
Previous, hombre.
La verdad es que original es un rato largo, ¿eh?
Las cosas como son.
Sí.
Ay, mira.
Hostia.
Aquí hay que, para ver el siguiente.
Claro.
Es que un slider en un scroll horizontal complicado, ¿eh?
Bastante complicado.
Vale.
Aquí se ha olvidado una imagen.
Vale.
Y side scroller demo.
Y aquí termina.
Sería totalmente.
Es muy raro.
Las cosas como son.
Es muy raro.
Me gusta la idea.
Sí, a mí también.
Tiene potencial porque es muy diferente al resto.
Exacto.
Como que le veo mucho potencial, pero le veo ciertas cosas.
Como que habría que arreglarla, ¿no?
Un poquito.
Sí.
Lo primero que haría segurísimo es que el aviso de scroll no desapareciera.
O que al menos hubiera una flecha fija.
Tipo a la izquierda, a la derecha y centrada.
Total.
Porque si abres la página, te vas a otro tab y vuelves.
Sí.
Entonces ya te queda así.
Entras aquí, no sé qué.
Bueno, va desapareciendo poco a poco.
Sí.
Sí que estaría bien que se quedase siempre ahí disponible eso de mirarlo.
O incluso ya sería una locura si al mover el muñeco, ¿sabes?
Que se moviera todo.
Exacto.
Y fuese haciendo scroll y fuese jugando de izquierda a derecha, ¿sabes?
Fuese como más rápido y pudieras ir jugando y saltando por encima.
Bueno, o sea, sería increíble, ¿eh?
Pero bueno, me gustaría.
Porque hay como una mezcla ahí un poco rara.
Pero me gusta mucho la idea del pixel art así y que se mueva a la izquierda.
Intentar quitar también el loading ese del principio.
¿Qué más se te ocurre, Cris?
Si avanzas un poco al resto de páginas del portfolio.
Sí.
Esta le modificaría seguro el alto de línea.
Porque el texto se ve como muy pegado.
O sea, cuesta de leer.
Hostia, esto lo que sigue es verdad que el responsive no tiene...
Ah, bueno, sí.
Parece que algo sí que...
Sí, no, está demasiado pegado esto, ¿no?
Sí.
Esto, como mínimo, 55...
También es verdad que centrado, es lo que a lo mejor decías antes, se lee...
A ver, aquí porque queda mal por lo que hay ahí de fondo, ¿no?
Pero creo que centrado como que cuesta mucho de leer, ¿eh?
O sea, el texto centrado suele funcionar si son titulares o son dos líneas de texto.
A la que se convierte en un párrafo debería estar alineado a la izquierda.
Claro, total.
Y luego aquí la experiencia también presentarla mejor de otra forma porque a mí me cuesta un poco saber seguir un poco la línea.
También el problema es el tipo de experiencia que es como las otras.
Claro.
Pero en la página anterior eran diferentes.
O sea, Skills es más grande.
Claro.
Entonces, seguramente Experience debería estar en el mismo tamaño que Skills en esta.
Yo creo que la clave sería utilizar siempre lo mismo.
O sea, si tú utilizas aquí un título de Skills y le pones un icono de Skills, que aquí pues tengas Experience con el mismo título, con un icono al lado también que se lleva de referencia.
Entonces, siempre vas a tener la referencia de que estás en una sección diferente, ¿no?
Y así constantemente, incluso el de contacto, pues igual aquí contact me.
Y siempre que ese título exactamente esté igual, ¿no?
Porque si no es lo que dices, que cambia el título, pierde la referencia, cambia totalmente.
Bueno, pero la idea, bien, ¿eh?
Vamos con Pablo Sánchez.
Pablo Sánchez.
Joder, la gente que...
De juego a un juego y...
La gente es súper creativa.
Vale, pues nos han echado en el Envoy.
Qué guay.
Está muy chulo, ¿eh?
Sí.
Está muy chulo.
Sobre mí.
Desarrollador web junior, me gusta crear proyectos innovadores utilizando RIA, Castro y todo.
Mi objetivo es construir significativamente un progreso de comunidad de resaltadores.
Y a la B para ir atrás, ¿vale?
Mira, y aquí para...
La verdad que está muy, muy chulo, ¿eh?
Está muy bien.
Está muy chulo.
¿Qué dirías?
Me gusta mucho que es coherente con lo que dice que es.
O sea, vuelve a la primera pantalla, la que definía la de sobre mí.
Porque dice proyectos innovadores.
Te queda clarísimo con este porfolio.
Sí, total.
Total.
Es bien.
El problema, entre comillas, que le veo es que puede ser que haya gente que no sepa utilizarla.
Total.
He pensado lo mismo.
Que hay gente que va a entrar aquí y va a decir esto que es.
No tengo ni puñetera idea de qué es esto, ni cómo se utiliza, ni nada.
Yo creo que a lo mejor sería interesante que sobre todo en estas resoluciones, pues apareciese a lo mejor aquí a la izquierda con su foto, un texto de más dos años de experiencia, desarrollador web.
A lo mejor incluso dos botones con las redes sociales y tal.
Y podría aparecer como un dibujo, una flecha dibujada, ¿sabes?
Sí.
Y dije, para saber más sobre mí, juega aquí.
Y al menos habría algo más que no te deja aquí todo vendido, que yo sí que lo sé utilizar, no hay ningún problema.
Pero me gusta mucho, Lea.
Ahora soy yo quien tiene una pregunta para ti.
Sí, dime.
¿Qué opinas de usar tooltips?
Tipo, cuando entras en la página que te diga, ¿sabes?
Como un tour.
Sí.
Te aprieta aquí hacia adelante, hacia atrás.
Algo así.
Te dices algo así, ¿no?
Algo así.
Sí.
Que dices, siguiente, para ir aquí, no sé qué.
A ver, quizás en este no sería mala idea, ¿eh?
No soy muy fan, porque si tienes que hacerlo, normalmente significa que no estás creando una experiencia de usuario lo suficientemente autoexplicativa.
Y yo normalmente me lo salto muy rápido, ¿no?
Porque dices, ostras, déjame tranquilo.
Sí, es como cállate.
Exacto, que yo lo que quiero es utilizar el producto.
Sí.
Pero aquí, que entiendo que podría ser lo suficientemente corto, ¿sabes?
Como decir, volver atrás o incluso he visto alguna vez una cosa que está muy chula que dibujan encima.
O sea, que no te hacen esto, sino que te hacen un dibujo encima como muévete con esto para volver atrás, para aceptar.
Y es solo un paso y ya está.
Vale.
Bueno, así pues puede ser, pero sí que en productos en general no me suele gustar, a mí, personalmente.
Vale.
¿Tú cómo lo ves, Cris?
Igual.
Para mí, usar tu tip es una mala señal.
De que la interfaz en sí misma no se entiende, entonces necesita más trabajo.
Tal cual.
Sí, sí, es como, es una forma de arreglar algo que deberías arreglar con UX o UI, ¿sabes?
Con un trabajo de decir, para que se vea claramente.
O sea, me resultaría muy raro que de repente Apple, por poner un ejemplo, cuando utilizases un producto suyo, te empezase a hacer algo así.
Y sería una señal de qué mierda es esta, ¿sabes?
Es como, no ha salido bien la cosa.
Y encima cuando empieza a ser cansino, ¿qué tienes que hacer?
¿Sabes?
Que te empiezas a scrollear, a enviarte arriba, abajo, no sé qué, no sé cuánto.
Es como, Dios, suéltame del brazo ya, suéltame del brazo.
Sí, además, eso no podías cerrarlo.
El de la web de Driver.
Sí, sí, sí, este es como...
Tú dale, que en algún momento terminarás.
Ah, mira, sí que, sí que, si le das al fondo, desaparece.
Vale.
Que al menos, al menos, al menos, bien.
Educalvo López, vamos con Educalvo.
Educalvo, soy diseñador web y fronte con sede en Madrid.
Trabajo actualmente en Cinetic Digital como freelance.
Disponible para nuevos proyectos.
Vale, aquí vemos...
Ay, qué bonito este joven, Dios mío.
Qué bonito.
Qué guay.
Cómo se nota aquí...
Mira, también tiene un efecto así blur en el fondo.
Está muy bonito.
Este está muy bien.
No tengo mucho que añadir, la verdad.
Sí, sí.
Está rechulón.
Muy bien integrado.
O sea, se nota aquí también la jerarquía de los títulos.
Está muy bien.
Está súper bien.
Me gusta...
Hay una cosa que es un poco polémica.
A ver, esto ya para quejarme, me gusta mucho el vento este que ha hecho aquí.
Me gusta todo.
Pero es verdad que a veces es un poco complicado el hecho de decir cuál es el objetivo más
bien de este portafolio.
Es el hecho de que tiene artículos, su experiencia, es para buscar trabajo.
O sea, está muy bonito.
Buah, y esta parte de los proyectos me encanta.
Está muy, muy chula.
Como está todo presentado y tal, me encanta.
Pero me queda esa duda un poco de que parece que es disponible para nuevos proyectos, pero
lo primero que destaca es su último artículo.
Estoy de acuerdo.
Quizá lo que haría es que las primeras filas fueran experiencia y proyectos.
Sí.
El último post abajo.
Sí.
O sea, no.
Quizá stack, el post y después la parte de contacto.
Sí.
Estoy de acuerdo.
Porque me parece raro.
Porque al principio pienso que es un sitio como para trabajo, pero luego último post.
Y me choca porque digo, hostia, y con lo bonito que es lo de los proyectos, no es más
interesante eso.
Pero bueno, me parece que está muy, muy chulo.
Me gusta mucho.
Algunos de estos componentes son de catálogos de componentes como Magic UI, que están muy
chulos.
Vale.
Que tienen esto, por ejemplo, a ver si encuentro el de Stars.
Que he visto que han estado utilizando.
Sparkles, no.
Es que esto está ahora muy de moda, pero muy de moda.
Que a ver, este, Meteors, ¿no?
Por ejemplo, este.
Ah, vale.
Este componente es exactamente este componente.
Que está bien.
Sí.
Yo también lo he usado en muchos proyectos porque está bastante bien.
Lo importante, porque mucha gente dice, ay, es que se ha copiado y tal.
Si da igual.
Si lo importante es cómo lo ha integrado todo.
Y todo integrado le ha quedado súper bien.
Y además las librerías están para esto, ¿no?
Y eso en ese caso ponía.
O sea, es open source también.
O sea, no es que esté copiando literalmente código de propietario.
Vale.
Esa era la otra duda que tenía yo.
Sí.
Justo estaba pensando eso.
Lo estaba probando.
Cuenta, cuenta, Cris.
Que se me hace muy extraño.
O sea, me gusta porque destaca dónde está ahora.
Sí.
Pero no es muy intuitivo el cómo funciona esta sección.
Además, haces scroll y va raro.
Ah, es cuando llega en la parte de arriba, ¿no?
Parece.
O cuando te paras.
No sé.
Sí, pero claro.
Claro.
Yo estoy aquí.
Sí.
Le doy arriba.
Y va aquí.
Y entonces, ¿cómo llegó al del medio?
No llego.
No sé.
¿Sabes?
O sea, se os salta.
Sí, me parece un poco raro.
Creo que no lo haría con Blur.
En todo caso, lo podría hacer a lo mejor con una opacidad menos bestia.
Y no sé.
No me termina de convencer.
Porque ya ves, a mí me está costando.
Además, hay algún problema de rendimiento raro también.
Y claro, es un poco molesto, la verdad.
Esto de experiencia creo que se podría mejorar un poco.
Como que queda muy bien visualmente, pero luego la experiencia no es tan buena.
O sea, entiendo muy bien el razonamiento que hay detrás de priorizar la actual y dejar el resto como para que las descubras.
Pero deberían ser un poquito más fáciles de leer.
Está muy chulo el menú.
Mira qué bonito la imagen de la batalla.
Está muy chulo.
Y está muy bonito esto de...
Tiene una tienda y todo este hombre.
Tiene una tienda.
Qué grande cosas.
Hay que ver.
Sonido.
Temas.
Muy bien.
Y las páginas de proyectos también hemos visto aquí que está bastante bonita.
Muy bien, muy bien.
Muy bien.
Me gusta mucho el portafolio.
Solo eso.
Mi duda es, pues eso, si la idea, lo del último porno es hasta qué punto lo cambiaría por proyectos.
Como decía Cris.
Nathan.
¿Qué te parece, Cris?
Me gusta mucho la parte de, digamos, de la cabecera.
Pero porque define quién es, qué hace.
Y te queda muy claro con la, vamos a llamarlo, ilustración que tienes.
Un buen resumen de su tipo de perfil.
Lo que me chirría más es la elección de los colores.
Y el cómo las frases de arriba de la cabecera se rompen.
Queda un poco raro.
Tú tienes hello.
Ah, esto, ¿no?
Nathan.
Sí.
Sí.
Como que todo tiene la misma importancia.
Esto es un error.
Yo creo que veo mucho en portafolios que el hello le da la misma importancia que todo lo demás.
Y es como muy raro.
Porque dices, a ver, el hello, en todo caso, no es tan importante como...
Porque incluso, es que casi que me lo podría...
Yo no sé si lo eliminaría directamente.
Porque tampoco en este caso, si ya tienes dos frases tan grandes, vale la pena.
Pero si lo quieres dejar, pues a lo mejor lo que tendría sentido es que perdiese importancia, ¿no?
O sea, quitarle un poquito o de opacidad, hacerlo más pequeño, no sé, para quitarle.
Yo lo, en este caso, teniendo en cuenta que tiene tanta cosa, yo casi que me lo petaría.
La jerarquía también es extraña en el sentido de que es un titular, todo es bold, pero tienes dos colores.
Y el botón de abajo tiene otro color además, que es el morado.
No hay como... no están muy integrados los colores.
Sí.
Sí.
Esto...
Sí, este...
Como dos colores de acentuación.
Es un poco raro.
Es que igual podría estar todo en regular, todo en blanco, y en bold, lo que ahora tiene color.
Seguramente funcionaría.
O incluso que uno de los dos tenga menos importancia también, ¿no?
Que al final, como es un bloque muy bestia, a lo mejor el This is Nathan Rico, pues...
Y este, como un subtítulo un poco más pequeño.
Y quitándole el verde este, que es un poco...
Claro, es que el problema es que, como no los ha puesto aquí...
Claro, es que también hay temas de HTML aquí, que también habría que comentar, pero bueno, no vamos a comentar porque si no, no nos da, ¿vale?
Pero, pero bueno, algo así como lo que estaba comentando Cris y con la idea esta...
Vamos a ver.
El tema del color este, frontend developer...
Claro, es que este color...
Vale, ha puesto aquí como el color este.
Que esto es lo que comentaba, ¿no?
De quitarle el color, ¿sí?
Sí.
Así está bien.
Y la otra opción era eso, todo en regular, salvo el nombre y el frontend.
Que además...
Claro, yo no sé si...
O sí.
También algo así, ¿no?
De tampoco darle tanta importancia, o la misma importancia.
Y lo que decías de regular, pues también se podría...
PhoneWave con el regular...
Bueno, claro, ah no, regular no, 400.
¿Esto decías?
Sí, poner...
Y sí, poner en negrita lo que...
Este, ¿no?
O sea, en bot...
Sí.
Y todo en blanco.
Ah, y todo en blanco.
O sea, opciones, sí.
Y esto también a lo mejor ponerlo...
Podría ser, sí.
Pero fíjate que solo eliminar el verde turquesa...
Ya le da más...
Ya se ve más integrado.
Claro, mejor integrado.
Es que el verde es verdad que es un poco complicado porque, claro, tienes aquí este rosa, que ya sé la acentuación.
Y eso también...
Y es verdad que...
Claro, y los iconos, que también los iconos...
Este es más pequeño.
Esto se ve muy...
No, este de Twitter es un poco más pequeño que el de Dinkedin.
Eso es un momentito.
Otro problema que yo le veo es que el código, ya el código per se, para presentar información, es complicado.
Pero claro, si le pones un array así, que encima no tiene espacios,
aquí, y está todo aquí puesto a saco,
si quieres presentar con JSON la información, pues, claro, formatealo de otra forma diferente.
O sea, vamos a ver.
Hazle una separación un poquito más...
Bueno, claro, aquí me lo ha puesto mal.
Pero para que nos hagamos a la idea.
Mira, aquí, pues, a lo mejor esto lo puedes poner en un salto de línea.
Puedes hacer que en lugar de ser línea, pues, algo así, que sean como mucho tres elementos por cada uno.
Porque así como que va a ser mucho más fácil de que lo escanee.
Lo importante más o menos es que se vea bonito.
O sea, que tampoco pasa nada, ¿sabes?
Pues, algo así.
Porque si no, en una sola línea, como que me cuesta mucho leer realmente qué información es la que me quiere mostrar.
Entonces, pues, lo puedes formatear un poquito así, yo que sé.
Se nota mucho más.
Es complicada la jerarquía en...
Sí, además, en este caso, seguramente es más importante el guiño.
Que no que el texto esté formateado, digamos, de forma correcta.
Llámalo texto, llámalo código.
Pero sí.
Sí, sí.
Tal cual, tal cual.
Que está guay la idea, como que me gusta.
Sí.
Pero ahí se ve, al menos en esta parte, se ve ahí como un bloque muy bestia, ¿no?
Muy bestia.
Vale.
Aquí, mira, aquí hay una cosa que a mí muchas veces me pone de los nervios.
A ver, a ver qué ves.
No sé, veo cosas varias.
A ver, púnta, Cris.
Tú, suéltate, no te preocupes.
Si aquí viene...
Nathan viene con todo para que le digamos cómo lo puede mejorar.
Veo dos cosas, al menos tres cosas extrañas.
Que es la jerarquía del título, que no tiene.
Claro.
Que además aquí hay otra referencia.
Aquí, exacto.
Y la de arriba es diferente, la de la cabecera.
Que además es súper bonita.
Me gusta mucho esta.
Y es, bueno, pues, si ya tenemos esta referencia, pues, ¿por qué no la usamos aquí?
Exactamente igual.
Y entonces ya tienes el título dos veces con el mismo...
Sí.
No está allí porque está el About Me ese allí a la derecha, al lado de la foto, como colgado.
Claro.
Pero que tampoco es exactamente el mismo porque aparte de que es vertical, es todo mayúsculo.
Cuando es, claro, es otra referencia.
Y el espacio de la tipografía está un poco extraño.
Y las líneas son muy largas también.
Claro.
Esto quiero pensar que son diferentes párrafos, pero no lo son.
Y esto es un error que en el nivel de...
Es tanto de HTML como sintácticamente, ¿no?
Ves que lo que ha hecho aquí, cualquiera diría que aquí tiene un párrafo, otro párrafo y otro párrafo.
Sí, sí.
Pero en realidad, ¿ves? Solo hay uno.
Y dentro lo que hacen es utilizar spans.
Vale.
Y por culpa de esto, no está la separación que comentas.
Porque, claro, si hubieran sido más de un párrafo que los está utilizando como si fuesen párrafos,
claro, la idea sería que esto tuviese una separación ahí, así, ¿no?
Exacto.
Que ayuda a entender y a leer el texto.
Pero no sé por qué la gente tiene...
Como que le da cosa utilizar más de una vez el párrafo.
Pero dices, bueno, pero si estás leyendo, si estás haciendo párrafos, utiliza el párrafo.
Y entonces ya, fíjate que es una tontería el cambio, pero de tener aquí esto que cuesta mucho de leer,
al menos esto, que todavía el texto es muy largo, ¿no?
Que es lo que decías tú, Cris, ¿no?
Que al final has dicho, hostia, es que ¿quién se va a leer esto tan de golpe, no?
Pero al menos ya tienes una separación que ayuda.
Sí, porque ya no lo percibes tanto como un muro de texto,
que es lo que pasa muchas veces cuando ponemos mucho texto sin formatear adecuadamente,
que eso da mucha pereza leerlo.
Por mucho que tengas interés...
Exacto.
Te es muy difícil.
Y encima ya se ve aquí que dices, es que si tienes aquí puntos y coma y todo, ¿sabes?
O sea, que ya te lo estás diciendo a ti mismo.
Si tienes un punto y coma ya quieres decir algo, ¿no?
Sí.
Y entonces lo que podrías hacer es tener una frase más corta,
luego habría que ver si sobra texto porque a lo mejor no es tan interesante que esté,
e intentar hacer que sea lo más básico, párrafos un poquito más cortos,
y que ayuda a la gente a...
Porque fíjate que yo cuando leo esto, lo que veo más es quién soy, empiezo a leer aquí,
como que me termino de aburrir, empiezo a leer un poquito aquí y ya digo,
let's in the way together.
¿Sabes? Es eso un poco lo que leo.
Y no llego aquí en medio ni en broma, vamos.
O sea...
Vale, experiencia.
Bueno, ¿cómo lo ves esto así presentado?
Jerárquicamente tiene sentido, o sea, porque cronológicamente tiene el orden que tiene que tener.
Lo que las fechas me ha costado leerlas, no sé muy bien por qué.
Sí, sí.
Por el formato creo, pero no sé.
Es que no parece muy buena idea utilizar el guión para separar cuando es el guión lo que estás utilizando para la fecha también.
Y claro, es un poquito raro.
Sí, al principio me ha parecido, no sé por qué, un número de teléfono.
Es verdad.
Puede ser, puede ser.
Yo creo que no ayuda la separación.
Y también que esté centrado.
Sí.
Es raro que esté centrado.
Yo creo que aquí no va bien el hecho de utilizar fechas con números.
O sea, puedes utilizar el mes en letra y el año en número, ¿no?
Junio de 2025.
Y eso a lo mejor te puede ayudar más a que visualmente la gente lo entienda más fácil.
Normalmente el mes es irrelevante.
O sea, 2022, 2024.
Sí, también.
También, totalmente.
Ponerlo quizá debajo del cargo.
O debajo de la empresa.
Claro.
Porque es primero la fecha antes que...
Que el resto de contenido.
Sí.
Y alinearlo, ¿no?
Seguro alinearlo para que esté junto con lo otro, ¿no?
También yo, este icono que está repetido tres, cuatro, cinco, seis veces, que no tiene un sentido per se que marca la diferencia en nada, yo creo que no aporta.
Yo los quitaría.
Tienes razón.
Es que no sé qué significa exactamente ese icono.
Si fuese un icono que dices, no, es que tiene tres iconos diferentes porque uno es donde fue junior, otro senior, o yo qué sé.
Pero no...
Por si no aporta...
No, y además teniendo la animación que hay a la izquierda, pues es un poco redundante ir repitiendo el icono de...
Entiendo que es alguien mirando un ordenador.
Sí, como he sido desarrollador ahí, ¿no?
Vale, los skills, proyectos...
Mira, aquí otra vez un poco con la idea esta de los proyectos.
Utilizando esto, claro...
Ah, mira, esto...
Mira, mira.
Bueno, está...
Qué guay.
Sí, está curioso ese.
Mira, me gusta.
Esto sí que está bien porque no es muy intrusivo y quedan como ahí apilados.
Está bastante bonito.
Y luego este sería un poco el final.
Bueno, ¿alguna cosita más que le quieras decir?
Así a Nathan.
No, en general está muy bien.
Es más tema de jerarquía de las tipografías y los colores que otra cosa.
Mira, pregunta por aquí, Pablito.
Dice, ¿con 20 años de experiencia se necesita porfolio todavía?
¿Tú qué dices, Cris?
Sobre...
Claro, en tema de UX entiendo que puede ser bastante diferente que en el mundo de la programación.
Creo que sí, porque de alguna manera tienes que seguir como explicando quién eres y qué haces.
El tema es que cuanto más senior eres, más cambia tu mensaje.
A menos en diseño al principio te centras como más en las habilidades que tienes.
Después en medio, digamos, entre senior y junior.
Las empresas en las que has trabajado, pero cuando eres senior casi que da igual.
Porque son más importantes las habilidades blandas, la mayor parte de las veces.
Entonces, es más que cambia el discurso, ¿no?
Que no haga falta el porfolio.
No sé.
¿Cómo lo ves tú desde la parte de desarrollo?
A ver, yo creo, la verdad, es que se necesita...
Sobre la pregunta de ¿se necesita?
Yo creo que con 20 años de experiencia no se necesita.
Pero siempre está bien a lo mejor tenerlo.
Pero es verdad que yo creo que en programación no se necesita.
¿Sabes?
O sea, puedes obviarlo totalmente porque al final con 20 años de experiencia tu LinkedIn va a hablar mucho más de ti.
Porque tienes la experiencia con...
Es que con experiencia en programación como que no tienes tanto que demostrar o explicar.
Pero sí que estoy de acuerdo con Cris que al final puedes utilizarlo para cambiar el mensaje y a lo que quieres llegar, ¿no?
Para explicar más a lo que aspiras.
Eso te puede ayudar un poco a construir tu historia.
Porque, por ejemplo, lo que buscamos en nuestro primer trabajo o cuando no tengo ningún trabajo, ninguna experiencia, es totalmente diferente a lo de 20 años.
Cuando tienes 20 años a lo mejor estás buscando algo muy específico y puedes destacar en tu portfolio los proyectos que has liderado, hacia dónde quieres ir más, ¿no?
Oye, he trabajado en proyectos internacionales y quiero hacer esto y esto porque ya he aplicado aquí, ¿no?
Y eso te puede ayudar, pero como necesario no me lo parece para nada.
O sea, sí que creo que es necesario para la gente que no tiene experiencia porque en algún sitio tendrás que enseñar algo y es difícil enseñar de la nada.
Pero cuanto más años de experiencia tienes, menos lo necesitas, pero sí que es algo útil que te puede ayudar.
Eso es lo que creo yo.
Has dicho algo que me ha recordado a otra cosa que creo que se dice muy poco, que es que el portfolio también puedes...
O sea, es una herramienta de venta porque te vendes a ti.
Claro.
Lo que suelo recomendar también es intentar adaptar un poco al portfolio al tipo de rol al que estás aplicando.
Tipo si es una empresa muy enfocada en, no sé, redes sociales.
Total.
Los proyectos que presentes deberían como encajar allí, ¿sabes?
Para que vean que tienes experiencia en ese tipo de negocio.
Puesto redes sociales, podría haber puesto, no sé, farmacéutica.
Claro.
Pero porque también tendrás conocimiento de negocio y eso te va a ayudar a venderte mejor que un portfolio genérico.
Sí, total.
Eso es una cosa que decimos mucho, ¿no?
Que cuando hagáis portfolio, que penséis básicamente en lo que estáis buscando, igual que cuando hacéis el curriculum.
Por ejemplo, cuando hacéis un curriculum tenéis que hacerlo pensando a lo que estáis aplicando y a lo que queréis conseguir.
Sí, en el curriculum, me encontré una vez el curriculum de una chica que había trabajado como asistenta en un hotel y tal.
Y en el curriculum quería aplicar como frontend y ponía, Sofía no sé qué, no sé cuánto, asistenta de hotel de no sé qué.
Y dices, bueno, a ver, es que no es a lo que quieres aspirar.
Igual lo puedes poner en experiencia porque es la única que tienes.
Pero no destaques eso de ti porque entonces la gente se va a quedar con eso.
Nos tenemos que adaptar y el portfolio es lo mismo.
Si queréis buscar clientes es una cosa.
Si quieres buscar tu primer empleo es otra cosa.
Si eres una persona que busca inversión para tus startups o tus ideas es otra cosa totalmente distinta.
Tenéis que adaptaros cada uno a la idea que tengáis.
Vale, vamos a ver el de Juan Camilo Carvajal.
A ver, Juan Camilo Carvajal.
Hola, mi nombre es Juan Camilo Carvajal.
Alguna idea mente, yo la desarrollo.
Soy un desarrollador de software enfocado en la creación de experiencias digitales.
Mi enfoque principal está en el desarrollo web con habilidades en diseño de base de datos y análisis de requerimientos.
Esta es un poco la idea aquí con el sobre mí, experiencia, próximamente dos proyectos.
No tenemos proyectos todavía.
Y este es el portfolio.
Bueno, todavía le queda a Juan Camilo también.
Tiene que trabajar, ¿eh?
O sea, se la ha dejado un poco a medias.
Pero así de primeras, ¿qué le puedo decir a Juan Camilo?
Lo primero que he pensado y no tiene relación específica con este es que todos los que hemos visto
eran porfolios oscuros o azules.
Sí, sí.
En programación suelen ser todos bastante oscuros siempre.
O azules porque es el color como más favorito que la gente tiene.
Sí, el más tecnológico seguramente.
Sí.
Me gusta mucho la introducción porque ha hecho lo que hemos comentado en otros porfolios,
que la parte del hola sea pequeña, no tenga la misma jerarquía que el nombre.
Exacto.
Y queda muy claro.
Quizá el párrafo de abajo lo pondría, quizá podría aparecer un poco más abajo
el hacer scroll.
Es que lo veo muy extraño.
Sí.
Sí, soy un desarrollador.
Y es un poco redundante porque desarrollo software, desarrollo...
Sí, todo el rato.
Yo la desarrollo, desarrollo de software, mi enfoque principal.
Yo creo que una cosa que a mí me choca particularmente es como que hay cuatro estilos
en muy poco espacio.
Sí.
¿No?
Un azul aquí eléctrico, un azul apagado, un azul más gris que además la tipografía
aquí está rota porque este no... a lo mejor faltaba ese símbolo.
Y luego aquí.
Sí, entonces como que me machaca mucho, muy rápido estas diferentes...
Yo creo que esta tipografía...
Oh, me la petaría otra vez, ¿sabes?
Porque digo, hola, mi nombre es...
A ver, y además el H1, la madre que te parió.
La madre que te parió.
Pero bueno, no pasa nada.
Yo casi que me la petaría porque al final...
O sea, entiendo la idea pero digo...
Es que no sé hasta qué punto al final te está ayudando eso a nada porque ya sabes...
O sea, ya...
Yo veo el nombre y ya entiendo que es tu nombre.
O sea, ya lo he entendido.
Quitaría el punto ese porque tampoco...
Ahí no le veo gracia.
Aquí sí porque me parece como muy...
O sea, me gusta más este punto aquí dramático porque es como muy tajante.
Yo la desarrollo.
Yo la desarrollo.
Pero en tu nombre no.
En tu nombre es muy raro el punto.
Y entonces ahora todavía veo lo que dices.
Y yo creo que a lo mejor aquí en lugar de ser un párrafo tan bestial a lo mejor iría
más corto, ¿no?
Intentaría hacer algo como más corto.
No sé.
A lo mejor...
No sé.
Para verlo visualmente.
No sé si algo más así.
Y aquí esto pues hacerlo más pequeño porque claro, también al final ahí queda muy bestia.
Que queda a lo mejor algo en dos párrafos.
Y que tenga una letra un poco más grande.
A ver, vamos a hacer esto un poco más así.
Para que no quede tan texto chiquitito ahí al lado.
Ahora.
Sí.
Algo así.
En dos líneas.
Sí.
Lo que cambiaría también es el color.
O sea, si todo es el mismo color va a quedar mejor.
Porque al final ya le estás dando jerarquía al texto con los tamaños y el peso diferente.
No hace falta hacer como más pequeño, diferente peso, diferente color.
Como ya queda claro con el tamaño.
Hostia.
Guau.
No sé.
Mierda.
Cuando utilizo esa herramienta no sé por qué.
Pero sí.
Bueno, esa sería un poco la idea para el tema del...
Creo que queda como más limpio.
Además, sería más fácil y ya está.
Aquí tenemos el sobre mí.
Que al menos aquí sí que ha utilizado párrafos.
Pero como que hay demasiado texto también le veo, ¿no?
Es difícil, ¿eh?
Porque muchas veces hay que intentar decir las cosas.
¿Cómo lo ves esto de los textos?
¿Cómo los trabajáis en Automatic, por ejemplo, los textos?
Hay una guía de estilos.
Y idealmente lo que deberíamos conseguir es explicar...
O sea, saber comunicar la idea con el mínimo de texto posible.
Claro.
Y ahí está el reto precisamente.
Porque escribir es fácil.
Puedes empezar a poner palabras, palabras, palabras.
Pero son de relleno muchas.
Y seguramente esto puede simplificarse bastante.
Sí.
Es que ya veo esta palabra.
El asimismo.
Sí.
Y ya me salta como...
Me levanta la ceja.
De...
Hostia.
Asimismo.
Sí.
Claro.
Asimismo he perfeccionado mi capacidad para interpretar de manera precisa los requerimientos necesarios.
Claro.
Claro.
Aquí dices, hostia.
O sea, este es un ejemplo de cómo puedes simplificar esta oración.
Tipo, a ver.
Interpreto los requerimientos necesarios de forma precisa.
Punto.
Ya está.
O sea, y ya quitas muchos conectores y cosas así.
O sea, es difícil, es difícil muchas veces, pero creo que es importante porque a veces
si no, se hace difícil de leer el texto.
Y aquí, ¿qué tal?
Ahí está la dificultad también de escribir, que parece fácil, pero es...
Sí, sí.
Es bastante difícil.
Lo que haría en la parte de arriba seguramente es separar las columnas de Frontend, que le
falta una N, Packend y base de datos, para que utilice como todo el ancho de los párrafos.
Claro, ya que tienes aquí esto, ¿no?
Puedes utilizar los...
Sí, que respire un poco porque están ahí como...
Claro.
Enganchadas.
Hostia, lo de...
Hostia, no sé por qué cuando utilizo esto, ahora se va la olla.
Sí, sí, lo de Frontend me gusta, ¿eh?
Frontend.
Es una nueva tecnología.
Vale, alguna cosita más.
Hostia, este error.
Este error es mítico, Cris.
Este error.
El de...
Vale, sí.
Es que se mueve todo encima.
Pero es que se mueve un poco el texto.
No sé si se ve.
Yo es que soy muy friki con esto.
Pero es que se va moviendo todo.
Y eso pasa por...
Esto pasa por...
O sea, tiene como un escalado.
No sé si es solo el escalado o le está poniendo un borde...
Joder, espérate.
Que voy a reiniciar aquí.
Creo que le está poniendo un borde que no debería.
Me da la sensación.
O sea, cuando está aquí...
Vamos a poner el hover.
Un momento.
A ver qué es lo que pone.
Ah, no.
Es que está cambiando el padding.
Está cambiando el padding.
Vale.
Claro.
Pues ya está.
No hace falta.
Entonces, no hace falta.
No hace falta, sobre todo, si va a molestar a texto y lo va a empujar.
Porque queda muy raro.
Y lo que hace es que tú haces el hover y de repente se mueven cosas.
Claro, pues eso.
Fíjate ahora la diferencia.
Lo bonito que queda así sin el padding.
Que está perfecto a que estés aquí y de repente se mueve el texto para arriba.
Es como...
¿Por qué está empujando esto?
Y tengo que decir que no es de los peores que hemos visto.
Que a veces se mueven iconos, se cae el texto.
Claro, porque no puedes saber si a lo mejor hay alguna cosa que no tiene espacio ahora
y entonces de repente lo rompe, ¿no?
Vamos con el delibardo.
Vale.
A ver qué te parece.
Ey, Whatsapp.
Hostia.
Whatsapp.
Cuando seleccionas el texto, desaparece el texto.
O sea...
Este no, pero este sí.
Este desaparece.
¿Qué te parece?
Así hago de pronto.
Me gusta la jerarquía, pero le falta mucho espaciado.
Está todo ahí como compactado.
Sí, me gustan los colores de fondo y todo eso, pero sí que es verdad.
Sí, esto a veces nos pasa que nos cuesta, ¿eh?
Meter separaciones nos da como cosa porque pensamos...
Es que si no, no van a ver nuestro contenido, no sé qué.
Y como que lo pegamos demasiado.
Aquí también, ¿no?
Está todo como...
Falta un poco de padding para que no esté tan...
Está como muy, muy, muy junto todo.
Es el pánico al vacío que nos pasa mucho también al diseñar.
Que también nos cuesta, justo lo que has dicho, de espaciar bien los contenidos.
Pero es que en realidad espaciar te ayuda a mejorar la jerarquía.
El ritmo visual en el sentido de cómo se lee todo.
Cómo identificas cada pieza.
Cómo identificas el contenido dentro de cada pieza.
En este caso las cards, por ejemplo.
Creo que ayudaría mucho a espaciar, digamos, las dos secciones principales.
La de la presentación y proyectos y las cards.
O sea, el contenido en sí de las tarjetas.
Luego a mí me choca mucho el título, ¿no?
Que es como, hey, what's up.
Ese es el título.
Hey, what's up.
Sí, es justo lo que hemos ido diciendo del hola.
Sí, el hola, ¿no?
Como darle la importancia al hola y tal.
Y como que creo que es como una oportunidad perdida, ¿no?
De intentar destacar algún punto tuyo en concreto, ¿no?
Aunque sea...
Sé que el nombre es lo más típico.
Pero al menos prefiero el nombre que el hey, what's up.
O hola, mi nombre es...
Pues tu nombre al menos sí que es algo único tuyo que sí que te puede ayudar, ¿no?
Lo que he dicho ahora es justo lo que iba a decir.
Que aprovechar eso para poner el nombre porque si te fijas no sabes cómo se llama.
O sea, porque los ojos se te van a la foto, al titular y luego la descripción.
Es que de hecho su nombre, porque aparece aquí, Libardo.
Sí, pero...
Que claro, visto esto, esto es una cosa que también nos pasa mucho en los portafolios de los programadores.
Que ponemos arriba a la izquierda nuestro nombre, como si fuese la home.
Sí.
Y no sé hasta qué punto realmente esto tiene mucho sentido.
Porque a veces, claro, en las páginas web, pues ahí es donde tenemos el típico logo.
Y nosotros como que nos vemos obligados.
Pero yo muchas veces pienso, a ver, tampoco nosotros estamos obligados, además, a hacer esto.
Cuando, claro, el problema es que ahora si lo quito se ve tal.
Pero dices, a ver, no lo pongas ahí y a lo mejor pon aquí que eres Libardo.
¿Sabes?
No hace falta que lo pongas a Libardo X.
Porque no sé cómo se llama Libardo, el pobre Libardo.
Entonces, pues Libardo X.
Y lo dejas aquí.
Esto, además, queda mucho más limpio.
Que a lo mejor la gente se pregunta, pero es que es esto de Libardo, ¿no?
O a lo mejor es su nick.
Pero, ah, no, Libardo Rengifo se llama.
Pues ya lo pones aquí, te quitas esto, que queda más limpio y te olvidas.
Y ya está.
Sí, e incluso los iconos de...
Entiendo que el modo oscuro y el idioma podrían ir abajo.
Claro, ¿abajo dónde?
En el footer también hay iconos, creo, recordar.
Ah, sí, sí.
Podrían estar allí también.
Sí, porque tampoco es que sean muy...
Bueno, a ver.
No se ven mucho.
Es interesante.
Sí, no se ven mucho.
Y luego, esto de los subtítulos, esto sí que muchas veces lo veo también un poco polémico.
Subtítulos que te explican un poco el título que ya se entiende.
Tengo que reconocer que tengo tendencia a ponerlos.
Sí, nos pasa a todos.
Nos pasa a todos.
Hasta que revisó el diseño al cabo de dos o tres días y en plan, ¿por qué estoy repitiendo la misma información?
Creo que está relacionado con lo que decíamos antes del pánico al vacío.
De que parece que queda como con poca cosa.
Pero quizá eso, incrementar el tamaño de la tipo y ya está.
Sí, porque al final, pues dices, si ya son proyectos...
Si vas a poner un subtítulo interesante, igual sí que vale la pena, pero si vas a describir exactamente lo mismo que ya se entiende por el título, uno de dos.
Entonces, puedes mejorar un poco el título para que en lugar que ponga projects, pues puedes decir proyectos en los que trabajé o proyectos, no sé, ponerle un poco más de contexto.
Pero un título que diga exactamente lo que ya se entiende, yo no sé hasta qué punto muchas veces...
Aquí sí que lo puedo entender porque siempre ayuda para entender lo que está haciendo esto, filtrar los proyectos.
Bueno, ahí sí.
Pero aquí muchas veces esos subtítulos como que no...
No sé por qué lo hacemos.
Yo lo hago un montón también.
Sí, lo que tendría del filtro es que quizá tiene sentido poner la etiqueta al lado del drop-down en lugar de en vertical como en horizontal.
Para que leas como proyectos, filtro y el drop-down para filtrar.
Claro, ponerlo más aquí la etiqueta.
Sí.
Justamente aquí a la izquierda.
Sí, porque si no baila tanto.
Claro, antes no lo hacía porque tenía el texto.
Pero esto lo que le permite ahora sería ponerlo en la misma línea y seguramente se entendería mejor.
También es un poco rollo que aquí cuando pone todos, solo muestra seis.
Y es verdad que aquí tiene una navegación de izquierda a derecha que entonces se ve...
Pero como que tampoco queda claro cuántas páginas hay.
Porque yo veo Importance y veo los mismos y parece que está pasando exactamente lo mismo, pero obviamente hay menos.
Pero claro, hasta que no vas...
Sí que es verdad que es raro cómo se ve esto.
Pero por lo demás, me gusta que se presenten los proyectos.
A mí me gusta mucho lo visual, de que haya una imagen, como hemos visto en el primer proyecto.
Porque creo que le da bastante presencia a que tenga la gente curiosidad.
Pero bueno, aunque le falte un poquito de separación, al menos me gusta que esté enseñando los proyectos y tal.
Y le falta un poco más de alguna más...
Lo mismo que decíamos antes de que terminaba un poco de golpe.
No sé, aquí lo que habíamos visto es ese call to action de quiero trabajar contigo, no sé qué.
Pues aprovechar un poco el espacio y decir más cositas.
Sí, un call to action o un formulario incluso de contacto.
Porque no hay ningún enlace de contacto.
Claro, bueno, aquí tienes GitHub, LinkedIn...
Claro, pero tienes que abrir el currículum o abrir GitHub, buscar el correo, escribir el correo.
Hay que ponerlo fácil.
Sí, cuanto más fácil, pues mejor.
Y Make with Love, With Libardo, Source Code, muy bien.
Bueno, está bonito.
Bueno, Cris, ¿qué te ha parecido la experiencia de ir mirando...?
Yo encantada, es que me gusta mucho hacer esto y me gusta mucho hablar de porfolio.
Sí, porque es algo importante y creo que se enseña muy poco.
En las formaciones, da igual el tipo de formación que hagas, no entremos ahí.
Pero el porfolio queda como, bueno, y ahora ya has estudiado y ahora sale a buscar trabajo.
Es como, ya, pero enséñame cómo.