Labba Studio
ESP
Design
2 de octubre de 2026 • 6 min read

La portada de Joy Division son tres reglas

Book of Shapes convierte gráficos icónicos en reglas que se pueden leer. Probamos una en tres formatos: la regla se adapta, pero sólo si también sabe dónde apagarse.

La portada de Joy Division son tres reglas

Apilá líneas horizontales. Movelas hacia arriba y hacia abajo con ruido aleatorio. Que el movimiento sea fuerte en el centro y se apague hacia los bordes. Esa es toda la receta que Book of Shapes da para la portada de Unknown Pleasures de Joy Division, y al leerla la imagen aparece en tu cabeza antes de verla.

Una imagen terminada sólo se puede copiar. Una regla se puede llevar a un celular, a un banner o a un tamaño que nadie previó. Si encargás una identidad visual o construís un producto con lenguaje gráfico propio, esa diferencia decide si el arte sobrevive al próximo formato o hay que redibujarlo a mano.

Qué es Book of Shapes

Book of Shapes es una colección de lo que su autor, el diseñador Nikolaj Sokolowski, llama "patrones SVG mínimos, generativos y personalizables". Generativo quiere decir que sale de instrucciones y no de un dibujo hecho una vez; SVG es el formato vectorial que los navegadores muestran nítido a cualquier tamaño. Cada patrón se puede ajustar antes de descargarlo.

Lo interesante es el texto debajo de cada patrón: explica cómo se construye. El de Joy Division habla de simplex noise, un tipo de aleatoriedad suave, y de una "envolvente en forma de campana", es decir, una curva que decide cuánto efecto recibe cada parte de la imagen.

El original también era un método. Según Scientific American, el gráfico viene de la tesis doctoral que Harold D. Craft Jr. presentó en Cornell en 1970: 80 pulsos de radio consecutivos del púlsar CP1919, apilados uno encima del otro. Peter Saville usó una versión blanca sobre negro para el disco en 1979. El ícono del disco empezó como un gráfico de datos con una regla: cada pulso debajo del anterior.

Probamos llevar una regla a tres formatos

Para probarlo fuera de una galería, usamos una regla mucho más vieja. En 1704 Sébastien Truchet publicó una memoria sobre combinaciones de azulejos cuadrados partidos por la diagonal. Book of Shapes incluye una versión hecha con arcos de cuarto de círculo. La nuestra, escrita desde cero sin su código ni sus definiciones, dibuja cuartos de círculo concéntricos en dos esquinas opuestas de cada azulejo: al rotarlos al azar, las curvas se enganchan en líneas continuas.

Hicimos una pieza para un hero web de 1600 × 600 píxeles y la llevamos a un celular de 390 × 844 y a un cuadrado de 1080 × 1080: primero como imagen, después como regla.

Encajar el hero terminado dentro de la pantalla del celular dejó vacío el 83% de la pantalla, y las líneas de 6 píxeles quedaron en 1,5. Recortarlo para llenar la pantalla mostró sólo el 17% del ancho original, con líneas engordadas a 8,4 píxeles. Ninguna se ve rota; las dos convierten el dibujo en otra cosa.

Volver a correr la regla en cada formato no tuvo sorpresas. El tamaño del azulejo siguió al lado corto de cada pantalla, la línea se mantuvo en 6 píxeles, el celular quedó con una grilla de 5 × 11 y el cuadrado con una de 6 × 6. Las tres se ven de la misma familia porque comparten instrucciones, no píxeles.

Tres pantallas de celular con el mismo patrón de Truchet: el hero terminado encajado con casi toda la pantalla vacía, el hero recortado como un primer plano agrandado y la regla generada de nuevo al tamaño del celular

Lo que primero hicimos mal

Un patrón detrás de un titular tiene que dejarle lugar al texto. Primero sacamos azulejos cerca del texto. La tinta debajo bajó casi a cero y el patrón se desarmó: en un Truchet cada azulejo completa las líneas de sus vecinos, así que borrar azulejos deja cabos sueltos en el aire. La continuidad era la identidad y la cortamos.

El segundo intento bajó la opacidad azulejo por azulejo. Las líneas sobrevivieron, pero la grilla apareció como escalones de gris.

Dos versiones del hero web: una con azulejos borrados alrededor del texto que deja cabos de línea sueltos, y otra con opacidad por azulejo donde se ven escalones de gris

Lo que funcionó fue una máscara suave que ignora la grilla: una zona difuminada donde todo el dibujo se apaga. Medida como proporción de píxeles oscuros en la zona del texto, la cobertura bajó del 27% al 7% en el hero y del 36% al 9% en el celular, sin cortar una sola línea. Es el mismo recurso que la envolvente en campana de la regla de Joy Division. La regla incluye dónde dejar de actuar, y ese "dónde" tiene que ser tan suave como el dibujo.

El hero web y la pantalla de celular con una máscara suave y continua: las líneas siguen conectadas y se apagan donde iría el texto

Son números de un solo patrón, una semilla aleatoria y zonas de texto ubicadas a ojo; miden oscuridad, no contraste de texto real. Sirven como demostración, no como benchmark.

Una regla no es original por sí sola

Una librería compartida también facilita que todos lleguen al mismo resultado. Un paper de marzo de 2026 sobre webs generadas con AI, de Shin y colegas, sostiene que las herramientas generativas tienden a reproducir "las convenciones de estilo dominantes" y propone una "fricción productiva" para cuestionar los valores por defecto. El paper habla de AI, no de librerías de patrones, pero nuestra lectura es que el riesgo se traslada: un patrón popular con su configuración de fábrica es la próxima foto de stock.

Book of Shapes pone su propio límite. Su licencia deja usar lo que generás con fines comerciales y sin atribución, pero no revender los patrones como pack o como generador: "un patrón puede ser parte de lo que vendés, no lo que vendés". Tres patrones quedan afuera porque recrean obras existentes, entre ellos el de Joy Division. Podés estudiarlos, no publicarlos ni venderlos, "menos que nada en la tapa de un disco o en un afiche, donde el parecido es todo el punto". No es una lectura legal: la lección de diseño es que desarmar una imagen en reglas no te hace dueño de la imagen.

Qué pedir

Si encargás una marca o un lenguaje visual, pedí las reglas junto con los archivos: qué varía, qué queda fijo, cómo se comporta el arte en un tamaño nuevo y dónde le cede lugar al contenido. Quien puede escribir eso tiene un sistema. Quien sólo puede exportar otro PNG tiene un dibujo.

A mirar durante el próximo año: si las herramientas de diseño empiezan a entregar el arte así por defecto, con envolventes y zonas de silencio como parámetros editables, o si las reglas siguen siendo cosa de quienes leen la letra chica.

Fuentes

Más artículos

[object Object]
29 de septiembre de 2026 • 6 min read

OpenAI Dots: delegar también es diseñar

OpenAI presentó Dots y Space en DevDay. La promesa es delegar trabajo continuo; el desafío de producto es poder entenderlo, revisarlo y cambiarle el rumbo.

Leer artículo
[object Object]
21 de septiembre de 2026 • 6 min read

El software no murió. Se multiplicó.

Stripe publicó números que lee como prueba de que el pánico del software estaba equivocado. Los mismos números dicen algo menos cómodo: terminar un producto dejó de ser difícil, y ahí era donde ganaban muchos productos.

Leer artículo