Mi sitio web es feo porque yo lo hice

 (goodinternetmagazine.com)
22 puntos por GN⁺ 2025-05-30 | 3 comentarios | Compartir por WhatsApp
  • Alguien podría haber hecho mi sitio web más genial, pero entonces no habría sido mío
  • La personalidad de un sitio web nace del gusto, las obsesiones y la intervención directa de quien lo crea
  • En busca de simplicidad y cercanía, reduje al mínimo el CSS y el JS, y apliqué directamente reglas de variación en CSS para producir caos, repetición y una sensibilidad de librería de viejo
  • El sitio está diseñado para responder a la interacción del usuario solo con CSS, y se caracteriza por una textura sin adornos y cambios inesperados
  • El sitio web sigue cambiando constantemente, crece y se transforma junto con su dueño, y así lo “feo” de cada quien sigue vivo

El sitio web que hice, y el sentido de su fealdad

  • Si mi mamá hubiera querido pegar dibujos elegantes en el refrigerador, habría copiado obras de artistas famosos como Vermeer, Lichtenstein o Wyeth
  • Pero mi mamá no quería ese tipo de arte, sino los dibujos que yo hacía
  • Un diseñador con buen gusto podría haber hecho que mi sitio se viera genial, pero entonces dejaría de ser mío
  • Para hornear pan, hay personas que quieren cultivar el trigo, extraer la sal y cultivar la levadura; yo no soy así
  • Mi paladar inmaduro se conforma con comer en cantidades industriales los breadsticks de Olive Garden
  • Ese gusto viene de una sensación de pertenencia que varía de persona a persona
  • Por sus propias razones, cada quien está decorando su propio espacio en internet

La existencia de muchas webs personales

  • Todas estas acciones nacen de una motivación interna y del deseo de hacer algo que “solo yo puedo hacer”
  • Yo no tengo la motivación para hacer pan, servidores o chips, pero ese deseo se expresa en cosas como el humor, los sistemas, el software y la estructura
  • Cuando la emoción se vuelve demasiado fuerte, termina brotando en forma de ficción, HTML/CSS, robots chafas o canciones tristes
  • Por eso mi sitio web es mío

La convivencia entre simplicidad y personalidad

  • Antes solo quería simplicidad y cercanía
    • Eliminar ruido
    • Resaltar el contraste
    • Reducir la profundidad de los menús
    • HTML aburrido
    • CSS al mínimo
    • Evitar JS, etc.
  • Así era mi sitio en 2023 (ver la imagen en el artículo original)

Diseño caótico, y una historia de CSS

  • En algún momento decidí aprovechar más el espacio horizontal, y ahí empezaron los problemas
  • El plan inicial era simple: aplicar flex-wrap a un ul
  • Pero como el texto también se envolvía, ya no quedaba clara la separación entre enlaces
  • Había gente que lo leía como inline, y otra que lo percibía como inline-block
  • Probé aumentar más el espaciado, poner bordes en cada enlace o insertar puntos entre ellos, pero nada me gustó

  • Así que elegí una forma de darles variaciones a los enlaces

  • El caos de la página principal en realidad proviene de unas cuantas reglas simples

    li:nth-child(4n + 0) { transform: rotate(1deg); }  
li:nth-child(4n + 1) { transform: rotate(-0.6deg); }  
li:nth-child(4n + 2) { transform: rotate(0.5deg); }  
li:nth-child(4n + 3) { transform: rotate(-0.75deg); }  
li:nth-child(6n + 0) { font-family: Times; }  
li:nth-child(6n + 1) { font-family: Helvetica; }  
li:nth-child(6n + 2) { font-family: Georgia; }  
li:nth-child(6n + 3) { font-family: Times; }  
li:nth-child(6n + 4) { font-family: Arial; }  
li:nth-child(6n + 5) { font-family: "Trebuchet MS"; }

  • Al principio usé enteros coprimos (coprime integer) para introducir más variación, pero terminé prefiriendo la sutileza de los patrones repetitivos

  • Amo el minimalismo, pero no me gusta que se sienta frío
  • Para expresar una calidez tipo “librería de viejo”, añadí algunos elementos sorpresa con CSS 
    li:nth-child(5n + 2) { font-weight: 100; }  
li:nth-child(7n + 2) { letter-spacing: -1px; }  
li:nth-child(41n + 31) { transform: rotate(181deg); }
  • La web sigue siendo un medio interactivo, así que quería que reaccionara al movimiento del cursor incluso sin JS
  • Con el siguiente CSS produzco una sensación de “tocar el pasto” 
    li:nth-child(2n + 0):hover { transform: rotate(-2deg); }  
li:nth-child(2n + 1):hover { transform: rotate(2deg); }
  • Así logré una respuesta en tiempo real al movimiento del cursor
  • Y como quería reforzar la sensación del scroll sin hacer scrolljacking, hice que la página pareciera de “papel” con un fondo texturizado
  • Usé css-doodle para componer la textura 
    svg {  
viewBox: .5 .5 10 10;  
fill: #000;  
circle*1000 {  
  cx, cy: @r(10), @r(10);  
  r: @r(.005, .01);  
  }  
}
  • En modo claro transmite el polvo del papel; en modo oscuro, la sensación de estrellas en el cielo nocturno
  • Así cambió mi sitio en 2024 (ver la imagen en el artículo original)

Yo cambio, mi sitio web también

  • Dentro de poco mi sitio web va a cambiar por completo otra vez
  • Porque yo soy el dueño de mi sitio web, y yo también sigo cambiando
  • Tú también vas a cambiar
  • Tus pasiones y valores se van a expandir hacia algo distinto
  • Aunque se vea fea, tu propia creación seguirá viva y en movimiento

Taylor Troesh, autor del texto, es el alcalde de taylor.town, autor de scrapscript y una persona que saborea las cosas chafas

Lecturas relacionadas

3 comentarios

 
secret3056 2025-05-30

Entré a verlo y, de verdad, es bastante críptico...

https://taylor.town/
 
tsboard 2025-05-30

Me identifiqué mucho con el contenido del artículo. Yo también me esfuerzo usando frameworks que los diseñadores crearon con mucho cuidado para disimular mi pésimo sentido del diseño, pero aun así he seguido haciéndolo de manera constante hasta ahora.
Cada vez pienso en un diseño mejor y disfruto ir corrigiendo una cosa y otra mientras construyo y mantengo el sitio.
Creo que gracias a este tipo de actividades le he tomado más cariño y también lo disfruto más. jaja
 
GN⁺ 2025-05-30
Opinión de Hacker News
  • Jaja, es verdad. La mayoría de mis amigos desarrolladores ya migraron hace mucho sus sitios a plantillas ya hechas como Hugo o Jekyll, pero yo sigo manteniendo mi blog con un sistema hecho totalmente por mí, desde el CSS hasta el backend. Para mí, la verdadera diversión no está en "tener un sitio web", sino en "el proceso de construirlo". No entiendo por qué tendría que dejarle la parte divertida a otra persona. Es parecido a mantener un auto clásico por cuenta propia. Podrías simplemente comprar un coche limpio y resistente, pero entonces no sería divertido. Lo importante no es el destino; yo soy alguien que busca divertirse. Como en el trabajo paso todo el día construyendo sitios donde no puedo decidir libremente el diseño o las funciones que quiero, nunca podría renunciar a la libertad de tener control total sobre mi sitio personal
    • Mi sitio web también está hecho completamente por mí, y de hecho lo he rehecho casi 10 veces en los últimos 10 años. Tiene su encanto hacer algún rediseño cada año. El código JS de matrix en la portada (https://oxal.org, puede que te sorprendas si haces clic), lo construyo con genox, un Static Site Generator que hice yo mismo, y uso sakura, un tema CSS también hecho por mí. Si vas al blog (https://oxal.org/blog/), te sigue un pequeño cíborg (generé la imagen base con chatgpt e hice yo mismo la animación de sprites con Piskel). Despliego manualmente en un VPS (compilo con make), tengo varios scripts de shell para subir archivos a ubicaciones privadas, el favicon también lo hice como pixel art cuando estaba en la universidad (enlace), intenté hacer mi propia fuente pero me rendí y terminé usando una inspirada en Naruto, y si ves el código fuente con la función "view-page-source" también puedes encontrar otra clase de diversión. Siento que mi sitio guarda las huellas de mi crecimiento como ingeniero de software, así que esta obra simple me resulta muy valiosa
    • Mi página principal (https://pablo.rauzy.name/) también la hice completamente desde cero. Es totalmente estática, usando solo scripts Bash personalizados y un Makefile para el build. Ni una sola línea de JS. Mientras estudiaba CSS, implementé por mi cuenta cosas como diseño responsivo y menú móvil. Creo que incluso terminé inventándome algunas rúbricas o metodologías, y ese tipo de prueba y error es lo que realmente se convierte en diversión
    • Yo fui por el mismo camino. Empecé con Hugo y al final terminé creando mi propio static site generator (Loulou). Fue pura diversión durante todo el proceso, y haberlo hecho yo mismo de verdad fue una experiencia valiosa. Mi sitio está aquí
    • Esa frase de "la diversión no está en tener un sitio web sino en construirlo" es la clave. Esto conecta con la creencia de los Caballeros Radiantes de "Journey Before Destination". Es una historia que se repite en muchos mitos. Incluso Hércules, cuando aún era humano, hacía cosas asombrosas, y al convertirse en dios dejó de hacerlo. El mensaje es que no te dejes quitar el sufrimiento ni la parte humana. Si te sientes bajoneado, recomiendo escuchar música de pájaros (https://birdymusic.com). Puede ser el sitio más genial o el más raro que vi hoy
    • Si ese es el objetivo, entonces está bien. Pero algunos sitios web simplemente quieren cumplir una función específica de forma sencilla y ya. Por ejemplo, este sitio solo necesita hacer una tarea concreta
  • En la imagen del sitio feo que aparece en el post original hay un montón de artículos del blog, pero el texto real está publicado en otro sitio web. Si no hubiera cookies de marketing o popups de membresía, preferiría ir directamente al sitio feo
    • En la captura se ve el correo hello@taylor.town. Yo también tuve la misma duda y visité taylor.town (https://taylor.town/). Y como después de publicar esto el sitio se puso lentísimo, supongo que le cayó el efecto Hacker News (HN hug of death)
    • Yo pensé que esto era una crítica típica a la "enshittified web". Me parece que este sitio es malo, pero también tiene cosas graciosas: (1) hay un banner para vender la edición impresa, (2) hay popup de consentimiento de cookies, (3) el encabezado "Good Internet" apenas se asoma entre todos los símbolos de lo peor de los sitios modernos, (4) cuesta leer el titular porque lo tapa el popup de cookies, (5) si quitas el banner de cookies, ahora quedan el ícono permanente de configuración de cookies y el botón "+ Become a Member". En comparación, taylor.town sí se siente como una web realmente buena
    • Probablemente publicó el texto en otro sitio porque el fondo, la tipografía o la selección de colores del sitio feo hacen que sea incómodo de leer. Por ejemplo: taylor.town/wealth-000. Yo también hice mi sitio personal por mi cuenta, pero no quedó feo. Creo que esa persona hizo su sitio feo a propósito, como medio envuelto en su propia autosatisfacción
  • Creo que hay casos de "feo pero interesante" y casos de "feo y aburrido". Este sitio está más cerca de lo segundo. Básicamente parece que un CMS solo recorre en círculos una carpeta de Markdown y escupe títulos con enlaces. No hay arquitectura de información en absoluto, ni categorías, ni íconos, ni imágenes, ni fechas, así que todo aparece con el mismo peso. Lo único que hace es estar acomodado para verse "raro". Como la mayoría de los blogs de desarrolladores reciben tráfico desde buscadores, quizá el diseño de la página principal no importe tanto, pero si la idea era construir una arquitectura para que los lectores exploraran activamente, tanto el intento como el resultado dejan un poco que desear. Al final se siente no muy distinto de un blog con la plantilla por defecto de Ghost
    • No hace falta. Lo importante es que el autor no hizo eso para satisfacer a los lectores, sino para satisfacerse a sí mismo. Por eso la opinión externa no es un punto tan importante
    • Creo que te perdiste por completo el mensaje central del autor
  • Aunque hagas un sitio web con frameworks, al final solo terminas con la misma apariencia y sensación que todos los demás, y eso no tiene ninguna gracia. Si es con fines de negocio, lo entiendo, pero si lo que quieres es mostrarte a ti mismo o a tu trabajo, me parece más valioso un sitio con personalidad. Aunque sea ineficiente para SEO o retención, me gusta la idea de plasmar mi propia identidad. Odio que los website builders de hoy se hayan vuelto tan estructurados y uniformes. Extraño muchísimo la época de Geocities o Freewebs: fondos con imágenes difíciles de leer, música en autoplay, cursores que seguían al mouse, calaveras girando frente al fuego, ese tipo de cosas
  • Me encanta porque esta filosofía conserva tal cual la sensación del internet de los primeros tiempos. Era una época en la que se criticaban mucho los sitios en Flash por su navegación rara y otros problemas, pero más allá de esos defectos, respeto la creatividad de hacer sitios únicos. Hoy internet está demasiado homogenizado, y creo que con el contenido generado por IA eso solo va a empeorar. Da gusto encontrarse con rincones no estandarizados
  • Conecto totalmente con esta filosofía. Mi sitio web expresa por completo quién soy yo. Aunque alguien diga que es feo o demasiado poco profesional, a mí este estilo me satisface. Ojalá hubiera más de esta actitud no conformista en la web y en el mundo
  • Disfruté mucho leer el artículo. Lo bueno de la "old web" era que no había estándares tan definidos, así que la gente iba creando cosas de manera experimental. Era más caótico, sí, pero la emoción de encontrar por accidente un sitio realmente genial y lleno de personalidad era real. La web de hoy se siente demasiado estructurada y formal, y como casi todo está hecho con las mismas plantillas y frameworks, terminó convirtiéndose en un espacio de consumo predecible. Se perdió la diversión de explorar
  • El sitio web de esa persona en 2023 no era feo; tenía una vibra minimalista. Ahora sí se volvió realmente feo. Al principio pensé que era la versión de 2023 y por eso estaba de acuerdo con el contenido, pero al ver la versión realmente fea, terminé adoptando una postura negativa hacia el mensaje mismo
    • No entiendo muy bien eso de que "ahora sí es tan feo que cambia el mensaje". El mensaje completo del texto es que hay valor en hacer algo a tu manera, porque te gusta y lo disfrutas, sin importar la mirada de los demás. Que tanta gente lo considere feo hace que el sitio y el mensaje sean todavía más atractivos. En el momento en que te quedas enganchado solo con la apariencia y sientes decepción, te pierdes el punto de verdad
    • El diseño anterior era limpio, minimalista y... no tenía nada especial. Ahora es un caos desordenado a propósito. Sea feo o no, se te queda grabado. Tiene sus desventajas (por ejemplo, puede ser difícil volver a encontrar ciertos enlaces más tarde), pero eso no le importa a esa persona. Lo que realmente quería era "incomodidad", "disonancia", "curiosidad" y, sobre todo, "/algo que sea solo mío/"
  • Todavía no tengo un sitio personal. Cuando lo haga, pienso hacerlo bien usando solo HTML+CSS+JS o JQ. Estoy considerando un servidor web como Apache o nginx. Probablemente lo suba al free tier de AWS o a un hosting compartido. Si logro dominar cómo centrar un div, ya podría empezar de inmediato
    • Llevo un año corriendo el combo S3+cloudfront en el free tier de AWS por 0 pesos. Probablemente sea la mejor relación costo-beneficio. Mi sitio es una sola página en HTML+CSS, y simplemente usé una plantilla que me hizo ChatGPT. No tengo la habilidad para hacer que funcione bien tanto en móvil como en desktop, así que con esto me doy por satisfecho
    • Recomiendo invertir unos minutos y arrancar de una vez en Neocities
    • No entiendo por qué centrar un div se volvió un meme 
        width: 60%; // define el ancho que quieras
  margin: 0 auto;
      Y listo, ya puedes empezar tu blog
    • Yo hice exactamente eso: domi.work Yo también lo hice feo :)
    • Yo voy por algo parecido, pero encima le puse 11ty para hacer static build y lo despliego con netlify pages
  • Los sitios hechos con plantillas limpias se parecen todos, pero cada sitio hecho a mano tiene una "rareza en cada rincón" que es única en el mundo. Si fuera un proyecto personal, elegiría "HTML wabi-sabi" en vez de una landing page de Tailwind