Design #1. Landing ReLand — que la landing vuelva a aterrizar

Ningún diseño de producto es eterno, y menos aún en una era en la que la IA avanza tan rápido. A medida que los requisitos se acumulan y la colaboración se vuelve más compleja, los equipos suelen dudar: ¿no será justo el momento de rediseñar? Pero nunca es una tarea sencilla — sobre todo cuando hay que mantener la landing actual iterando con normalidad y, al mismo tiempo, sacar adelante un rediseño completo.

¿Por qué ahora?

La primera landing page de Zeabur solo necesitaba dejar clara una cosa: que éramos una plataforma de despliegue con pago por uso. Si el usuario entendía CI/CD y pago por consumo, con eso bastaba. Pero durante el último año la forma del producto ha ido creciendo sin parar: AI Hub, Dedicated Server, Domain, Email, y más recientemente las Skills basadas en Claude Code. Los fuimos metiendo en la página de la misma forma una y otra vez: una tarjeta nueva, un párrafo corto, un enlace. Cada paso parecía razonable por separado, pero cuando hacías scroll hasta el final, la página ya no parecía un home de producto, sino un escaparate cada vez más abarrotado: se podía terminar de leer, pero no contaba una historia completa.

También ha cambiado la intención con la que los usuarios llegan a la landing. Antes la gente leía de arriba a abajo — veía las features, los precios, las plantillas. Ahora, cada vez más gente prefiere entregarnos un proyecto directamente y dejar que Zeabur piense qué hacer a continuación. Por eso la landing necesita una verdadera puerta de entrada para la IA.

Iterable, no de un solo uso

Al final no planteamos este rediseño como «hacer una versión más bonita de la landing». Lo que queríamos era una landing capaz de absorber los cambios que vengan — y eso significa que lo importante hoy no es cuán pulida esté esta versión, sino si el próximo compañero, dentro de seis meses, sentirá fricción al añadir una sección.

Ese es el principio más profundo del proyecto ReLand: asumir que la landing está viva. Se va a seguir tocando. Por eso pusimos la energía en tres cosas.

La primera: sacar los colores, la tipografía y los bordes de los componentes y reunirlos en un único conjunto de CSS Variables. Light y dark definen cada uno sus propios tokens, y se intercambian con html.dark. Lo que queda en los componentes son solo referencias semánticas — «color de marca», «estado activo», «borde». Cambiar de tema ya no es algo que un componente concreto tenga que tratar de forma especial, sino una capacidad que la página entera tiene por defecto.

LightDark

La segunda: que cada sección sea reemplazable de forma independiente. En la nueva home, cada bloque es un componente aparte, y las secciones se cosen entre sí con un vocabulario visual fijo: líneas sólidas arriba y abajo, y en medio bandas de transición con rayas diagonales. Las diagonales se parecen a la cinta de obra en una zona en construcción y están, deliberadamente, en las «costuras». No intentamos que todo pareciera una sola pieza — al contrario, hicimos que fuera evidente dónde están las interfaces y dónde se puede sustituir. El día que se añada una sección de Skills o se quite una de Templates, la cadencia general no se romperá.

La tercera: dejar que la entrada a la IA recorra toda la línea de visión. La AIBar no es un botón auxiliar: es el punto visual al que llega toda la página. Empiezas por el Hero, entiendes en el tramo central qué podemos hacer, y aterrizas de forma natural en la AIBar, justo encima del CTA — puedes arrastrar el código directamente dentro y empezar a desplegar, sin registrarte antes, sin leer la documentación antes y sin pasar antes por el Dashboard.

El cambio más grande en la nueva home es el Hero.

Por eso lo pintamos entero de nuevo. El fondo del nuevo Hero es una capa de shader WebGL hecha desde cero: naranjas cálidos en modo claro, morados en modo oscuro, con un fundido suave al cambiar de tema en lugar de un corte seco. Parece un mar de datos ligeramente perturbado — con una luz direccional, una fina trama de caracteres en puntos y una deformación suave de la rejilla. No es por lucirse — es que, siendo una plataforma de infraestructura, Zeabur debería ser capaz de pintar su propia primera pantalla. El Hero actual está muy limpio: el fondo genera la atmósfera, el tagline da un motivo para decidir, y la AIBar junto al CTA proporcionan la acción.

Esta forma de «seguir puliendo capa a capa» es algo que repetimos a lo largo del proyecto. El instinto del diseñador suele ser «con un poquito más quedaría mejor». Más difícil es la decisión «¿quedará mejor si quito esta capa?».

Confianza

En este rediseño hubo una decisión que casi reescribió el carácter entero del sitio: abandonamos las esquinas muy redondeadas.

En la landing antigua, las tarjetas, los botones y los contenedores usaban radios de 16px o mayores. Durante los últimos años, las esquinas muy redondeadas se han convertido casi en el idioma por defecto del SaaS y de los productos de consumo: resultan amables, suaves, cercanas, bajan la agresividad de la interfaz y dan la sensación a primera vista de que «este producto no es difícil de usar». Para un producto en fase inicial, que necesita ganarse rápido la simpatía de los usuarios, es una estrategia muy eficaz.

Pero a medida que los usuarios de Zeabur pasaban de «desarrolladores que querían probarlo» a «equipos que ponen tráfico de producción encima», esas esquinas grandes empezaron a convertirse en un lastre.

Las esquinas muy redondeadas dejan como primera impresión una sensación psicológica de "juguete". Cuanto mayor es el radio, más se parece la interfaz a un canto pulido: bonito, inofensivo, algo que puedes tener en la palma de la mano. Pero la infraestructura no es un juguete. Cuando un usuario va a confiarnos el entorno de producción de su empresa, lo que quiere ver es un muro de carga, no bloques de espuma. Hay una observación sencilla de la psicología del diseño: cuanto más se aproxima la curvatura a un círculo, más "tierno" parece; cuanto más se aproxima a una línea recta, más "serio" parece. El Zeabur de ahora necesita lo segundo.

La pérdida de la "sensación de que aguanta peso". Las esquinas muy redondeadas, en esencia, son los cuatro vértices del rectángulo "raspados". Cuanto más se raspan, menos capaz parece el contenedor de guardar cosas — visualmente sugiere que "esto es un objeto pequeño". Pero lo que queremos mostrar son clústeres, proyectos, servidores, todos ellos conceptos de peso. Meter algo pesado en un contenedor que parece ligero siempre deja una sensación desajustada.

Las terminales, IDEs, paneles de monitorización y consolas de nube que los desarrolladores abren a diario no se apoyan prácticamente nunca en esquinas muy redondeadas. Usan radios contenidos (4–8px), bordes nítidos e información densa. Cuando la landing de Zeabur contaba la historia de la infraestructura con un lenguaje de esquinas propio de producto de consumo, el cerebro del usuario nos metía inconscientemente en la categoría de "hosting para proyectos de juguete", no en la de "plataforma cloud en la que se puede correr producción".

Cuando todo el SaaS usa radios de 16px+ y gradientes suaves, ya no transmiten ninguna información — son solo ruido. Son las marcas que se han atrevido a apretar los radios y dejar que los bordes se encuentren de forma limpia (Linear, Vercel, Stripe Dashboard) las que visualmente parecen, sin esfuerzo, más "adultas".

Por supuesto, tirar por completo los radios tampoco es la respuesta. Los ángulos rectos traen otra emoción extrema: frialdad, distancia, burocracia. No buscamos la postura de "no me importa si lo entiendes o no" de la web de un banco, sino algo más cercano a "sé que estás haciendo algo serio y te acompaño a tomármelo igual de en serio".

Por eso en la nueva versión hemos condensado el sistema de radios de toda la web hacia una escala más contenida. Los bordes son más claros, las separaciones más directas, y el borde afilado de las bandas de rayas diagonales también forma parte de la misma idea — queremos que cada punto visual en el que el usuario se detiene mientras hace scroll le esté diciendo: esta es una plataforma seria, en la que vale la pena poner cargas reales.

Un radio es solo un símbolo, pero detrás de él hay todo un giro de la estrategia comunicativa: pasar de "venga, pruébalo" a "estamos listos para sostenerte".

Para terminar

ReLand salió de una sola vez, pero para nosotros no es un punto final, sino un punto de partida. Para quien visita el sitio, lo importante no es lo deslumbrante que quede la página, sino lo más fácil que resulta empezar. Para nosotros, lo importante es que la próxima vez que queramos añadir un bloque nuevo, cambiar de tema o responder a un nuevo patrón de interacción, no tengamos que empezar desde cero.

Y nos obligó a repensar, de paso, qué es una landing en sí misma. Para una plataforma de despliegue, la métrica más importante de una landing nunca ha sido "cuán premium se ve", sino "cuántos pasos hay desde ver el producto hasta el primer despliegue". El sticky dock de la AIBar comprime esa distancia hasta casi nada: echar un vistazo al fondo, leer una línea de tagline, hacer scroll tres pantallas, arrastrar el proyecto a la AIBar.

Eso es lo que queremos decir con "que la landing vuelva a aterrizar" — no debería ser solo un escaparate; debería ser, en sí misma, el primer paso del despliegue.