Me considero mal diseñador. Lo digo una vez y sigo, porque no es el tema: el tema es que igual tuve que diseñar un portafolio entero, y el método que usé fue el que usa cualquiera que no sabe —buscar referencias y trabajar a partir de ellas—, con una regla propia que en su momento me pareció suficiente para no copiar. Una referencia distinta por página.
Terminé la última página, la abrí al lado de la primera y encontré algo que no esperaba. No eran la misma página. Pero venían del mismo lugar, y ese lugar no era ninguna de mis referencias.
El método: una referencia por página
El 10 de julio dejé cerrada la definición del sitio: qué páginas iba a tener, para quién estaban escritas y cuatro referencias visuales que me gustaban. Al día siguiente inicialicé el repo y me puse a diseñar.
La regla era la que dije: una referencia distinta por página, sacadas de Pinterest y de sitios de diseño. Si cada página salía de un lugar distinto —pensaba— cada página iba a terminar distinta. Diseñé en ese orden: primero la Home, después Proyectos, después Artículos.
No fue lento. Sobre mí, el blog y la paleta de comandos salieron en una sola tarde: los archivos de esos mockups están fechados entre las 17:09 y las 18:23 del 11 de julio, con una segunda versión de Sobre mí a mitad de camino. Ese mismo día quedaron documentados el sistema de fondo y el de movimiento del sitio.
Lo aclaro porque el problema que viene después no es de velocidad ni de falta de documentación. Producir, producía.
Mis referencias eran distintas; mis páginas, no
Cuando terminé Artículos lo puse al lado de la Home y me quedé mirando. Estas dos capturas son de esos días: la Home del 11 de julio y un hero de Artículos de la tanda del rediseño del blog, cuando la Home vigente seguía siendo exactamente esa.
Lo primero que comparten es el molde. Los dos heroes ocupan la pantalla entera, ni un pixel menos. Los dos
tienen una barra vertical fija contra el borde izquierdo —74 pixeles en uno, 88 en el otro— con el monograma
LC arriba y mi nombre escrito en vertical. Los dos resuelven el fondo igual: radiales de violeta estirados
sobre toda la superficie. Los dos ponen una etiqueta chica arriba del título, en monoespaciada, mayúsculas y
con letterspacing, acompañada de una marca aqua —un punto en la Home, un cuadradito en Artículos—. Los dos
títulos son un h1 de tamaño fluido con el interlineado apretado. Y los dos siguen con el mismo compás:
párrafo de apoyo y después algo, botones en un caso, la firma y el tiempo de lectura en el otro. La paleta
es la misma hasta el valor exacto: mismo violeta, mismo aqua, mismo fondo casi negro.
Y aun así no son la misma página, y conviene decirlo con precisión porque las capturas están acá arriba y me desmentirían. La Home centra el contenido en dos columnas, con el mini editor a la derecha, el monograma gigante detrás y una tira de tecnologías cruzando el pie. Artículos ancla una sola columna abajo a la izquierda, con esquinas decorativas y un wash bastante más saturado. Las composiciones son distintas de verdad.
Lo que se repite es el repertorio de gestos, no el layout. Mismo repertorio de gestos, distinta composición. Y eso es más incómodo que si fueran iguales, porque significa que el esfuerzo estuvo puesto donde menos importaba: moví las cajas de lugar, que es la parte que se ve. Lo que no pude mover fue el vocabulario con el que las armaba.
La explicación tardé en aceptarla y es bastante simple: los gestos son lo único que se puede copiar mirando. Una referencia te muestra decisiones ya tomadas, no el criterio que las tomó. De cada una de las mías yo podía extraer lo que era visible y nombrable —el hero ocupa toda la pantalla, hay una barra fija a la izquierda, arriba del título va una etiqueta en mono—, y nada de eso era la referencia: era lo que esa referencia tenía en común con todas las demás del mismo género. La parte que la hacía distinta —por qué esa jerarquía y no otra, qué está tratando de que mires primero, qué dejó afuera a propósito— no está en la superficie. Y era justo la parte que yo no sabía leer.
Ahí está el mecanismo completo. Cuando copiás sin criterio no te llevás la referencia: te llevás tu propio promedio. El promedio de todo lo que viste, que es el mismo mires lo que mires, porque está hecho exactamente de lo que todas comparten. Por eso mis páginas convergían aunque mis referencias no se parecieran en nada. Tres referencias distintas, un solo resultado, y el resultado era mío.
Se ve mejor al revés. Estos dos mockups los hice con días de diferencia, mirando cosas distintas, con intenciones distintas para cada página. La constante no era la referencia. Era yo.
Por qué no lo corregí en el momento
Lo vi, lo anoté y seguí. Hoy me interesa más eso último que el error en sí, porque no fue distracción: no tenía con qué decidir si eso estaba mal.
Un sistema de diseño produce parecido a propósito. El aside, la paleta y la tipografía son compartidos por decisión, y esa decisión es lo que hace que tres páginas se sientan un solo sitio y no tres sitios pegados con cinta. Sin eso, un portafolio se lee como una carpeta.
El problema es que desde afuera el parecido-por-sistema y el parecido-por-copia se ven igual. Mis dos heroes compartían aside, paleta y tipografía por decisión —eso estaba bien— y compartían el molde del hero y el repertorio de gestos por copia —eso estaba mal—, y a simple vista es la misma foto. No tenía cómo separar una cosa de la otra, así que hice lo único que se puede hacer sin criterio: lo anoté y seguí.
Esa duda es el síntoma. Si no podés decidir si dos páginas se parecen porque son coherentes o porque las hiciste igual, lo que falta no es ojo: es la regla que dice qué tiene que ser distinto y qué tiene que ser compartido.
Y la parte incómoda es que la regla ya estaba escrita, por mí, el mismo 11 de julio, apenas terminé el primer mockup completo:
IDENTIDAD POR SECCIÓN (regla nueva y clave): cada sección debe tener identidad visual propia — layout, tratamiento de fondo, composición y uso de acento distintos (…) NO que todas se vean iguales.
Estaba fechada, era mía y era del día uno. Solo que la escribí a nivel sección, dentro de una página, y el mismo problema reapareció días después a nivel página, donde no lo reconocí. Escribir la regla no alcanzó. Una regla que no sabés aplicar a la escala de al lado todavía es una frase, no un criterio.
El mismo error, en otras dos escalas
No fue una anécdota de dos heroes. El mismo error aparece dos veces más, una escala arriba y una escala abajo.
Una página entera. Entre el 12 y el 13 de julio rediseñé el blog con un hero-carrousel a pantalla completa y franjas tipo revista. El feedback fue “la página dejó de parecer un blog”, y el diagnóstico, demasiada imagen y poco texto. Tiré el diseño completo y el 14 escribí la versión que quedó. Lo que había diseñado no era un blog: era una revista.
Un token. El violeta ambiental del fondo creció hasta dejar de ser atmósfera y volverse el campo de la página. El resultado quedó anotado así: “hay MENOS color, no más”. Si el violeta es el fondo, ya no puede ser el acento; nada contrasta contra sí mismo.
En los tres casos —los heroes, la página, el color— el error no fue ejecutar mal. Cada pieza estaba razonablemente bien hecha. Fue no tener escrito para qué servía cada una, que es exactamente lo que una referencia no te da.
Lo que faltaba tenía nombre
Entre el 22 y el 24 de julio rediseñé la Home, y esos días fueron en buena medida dos o tres días peleando un solo hero. Me desgasté, paré y me puse a estudiar diseño. El diagnóstico que me quedó grabado de ese parate fue el mismo que venía sin poder nombrar: falta de diferenciación.
De ahí salió la North Star. Reemplazó dos secciones —el stack y un snapshot de Sobre mí— por una constelación de once cajitas que se expanden al clic. El mecanismo costó unos seis rediseños del algoritmo y dejó cinco invariantes escritos; el archivo de trabajo con el pseudocódigo se perdió y los tuve que recuperar de la memoria del proyecto. También se llevó puesto el mini editor que se ve en la primera captura: hoy ese lugar lo ocupa un eco de la North Star, una réplica en miniatura atada al scroll.
Y acá va mi propio error de lectura, que es mío y lo digo yo: entendí North Star como algo grande y destacable al inicio de la página, cuando una North Star es el criterio que guía la página entera. La sección funciona. Lo que falló fue entender qué era. Hoy lo veo así: podría haber sido algo simple reflejado en todo el sitio, en vez de una sección imponente que se ve una sola vez.
El rediseño también tuvo una factura, y la conozco porque la medí el 24 de julio. La Home quedó rozando su propio techo: unos 14,3 de los 15 KB de JS bloqueante que fija mi propio presupuesto de performance. Y el fondo global quedó con dos animaciones CSS infinitas, que contradicen otra regla mía, la de trabajo sostenido cero. Las dos cosas aparecieron porque las medí: una medición mía que terminó contradiciendo una regla mía, y esa es la parte que me llevo del episodio.
El fondo es el mejor ejemplo de que el criterio todavía no estaba del todo formado. Es un shader WebGL vanilla, compartido por toda la Home, con progressive enhancement real: si WebGL falla, se ve el fondo de siempre. Y mi juicio sobre él es este, tal cual: quedó genial pero no conecta con la North Star. Lo dejé porque cumple su función. Los fondos me costaban y me siguen costando.
Las herramientas llegaron al final
Recién después de implementar la Home empecé a usar Figma y Canva con profundidad, y a armar prompts con estructura para los agentes con los que trabajo. Las mejoras fueron reales y se notaron enseguida. Lo digo antes que nada porque lo que sigue no es una crítica a las herramientas.
Lo que me interesa es por qué funcionaron ahí y no antes. Para entonces ya había algo escrito que ejecutar: la regla de identidad por sección, el sistema de fondo, el de movimiento, el diagnóstico de diferenciación, la North Star aunque la hubiera entendido a medias. Una herramienta de diseño no decide cómo tiene que verse tu página; hace mucho más rápido lo que ya decidiste. Si hubiera abierto Figma el 11 de julio, habría producido esos mismos dos heroes en la mitad de tiempo.
El corolario viene del lado de los agentes y es la parte que más me sirvió. Venía delegando diseño a agentes que no estaban configurados para eso, y lo que volvía era mediocre: lo terminaba corrigiendo a mano siempre. Durante un tiempo lo leí como un problema de los agentes. No lo era. Les estaba delegando un criterio que no existía escrito en ningún lado, y un prompt con estructura funciona justamente porque lleva el criterio adentro. Cuando el criterio no está, lo que vuelve es —otra vez— el promedio.
Hay algo más que noté mientras estudiaba y que suena a mala noticia sin serlo: cuanto más aprendía, más errores encontraba en lo que ya había hecho. Las causas que puedo enumerar son tres y son todas mías: no tenía estructura, no sabía diseñar, y estaba delegando las dos cosas.
Lo que me quedó
Una herramienta amplifica el criterio que ya tenés; no reemplaza el que te falta. Es lo único que me llevo de todo esto, y lo escribo en ese orden a propósito, porque la versión invertida —“las herramientas no sirven”— es falsa y no es lo que pasó. Figma, Canva y los prompts con estructura mejoraron el sitio de forma visible. El punto no es su utilidad: es el orden. Llegaron cuando ya había algo que amplificar.
Copiar tampoco está mal, y no quiero que se lea así. Copiar es cómo se empieza. Lo que no funciona es copiar sin saber qué estás copiando, porque entonces lo que se te pega no es la referencia sino su superficie, y la superficie la comparten todas.
Nada de esto está terminado: es el camino, no el final. La diferencia con el 11 de julio no es que ahora sepa diseñar. Es que ahora, cuando dos páginas mías se parecen demasiado, sé qué preguntarme.