En el directo P233 construyendo en público este blog con vibe coding estuve afinando detalles de UX y arquitectura y aquí te cuento qué hice.
El editor de contenido también necesita buena UX
Siempre diseñamos pensando en el usuario final, pero hay otro usuario que solemos ignorar: la persona que crea el contenido.
En mi caso, yo mismo.
El editor de Markdown tenía un problema: Al activar la vista previa del post, el bloque de configuración SEO desaparecía. O veías el renderizado, o veías el SEO. Nunca los dos a la vez…
Lo resolví para que ambos convivan en pantalla mientras escribo. Ahora puedo revisar el contenido y la optimización al mismo tiempo, sin cambiar de modo.
Otra cosa más…
El segundo problema venía de subir imágenes desde el dispositivo: El editor llenaba el código fuente con cadenas Base 64 kilométricas y el archivo se volvía ilegible.
Lo abordé siguiendo sugerencias de Tomás y otras personas de la comunidad, aunque lo voy a pulir en profundidad cuando el proyecto esté conectado a una base de datos. De momento implementé una lógica para que, al cargar un archivo, el sistema genere una URL local limpia con el nombre del archivo.
Lo siguiente parecía un detalle menor….
La estructura de URLs es arquitectura de información
Las rutas del blog no estaban bien organizadas…
Cambié la estructura plana dominio/blog/slug-del-post por una con jerarquía: dominio/blog/categoría/slug-del-post.
Con eso el usuario sabe dónde está dentro del sitio sin necesidad de leer el título.
Además activé páginas de listado público por categoría, así el contenido es navegable desde cualquier punto.
Y revisándolos encontré otro problema que debía ser arreglado, sigue leyendo.
Dos destinos, una misma tarjeta
La tarjeta componente Card del blog tenía un conflicto habitual…
Quería que toda la tarjeta fuera clickable hacia el post, pero que el badge de categoría llevara al listado correspondiente… dos destinos en un mismo elemento.
La solución:
Poner un enlace invisible que cubre toda la tarjeta para la navegación principal.
Encima, el enlace de categoría con posición relativa para que sea independiente.
Con la iteración también conseguimos que la imagen del card también funcione como enlace directo al post.
La tarjeta quedó perfecta, pero faltaba algo más…
Breadcrumbs: para que el usuario nunca se pierda
Por último y para cerrar el directo, construí un componente reutilizable de breadcrumbs que -en principio- se integra automáticamente en las páginas de categoría y en el detalle de cada post.
El usuario puede volver atrás sin usar el botón Atrás del navegador.
Es un componente pequeño… pero cuando no está, se nota.
Como dije más veces, diseñar y montar un blog con ayuda de la IA no significa pedirle que haga la página…
Significa guiarla y decirle qué reglas tiene que respetar, qué lógica tiene que seguir, qué detalles no son negociables.
Recuerda, esa parte la tienes que poner tú.
Te dejo el vídeo del directo para que veas el proceso completo.
Aprende sobre UX/UI + IA, Figma y Product Design
📣 Apúntate a mi newsletter semanal
