El diseño de Quantum Proxies: luz LED, cristal y una sola cámara

Los proxies y los servidores son productos invisibles. Nadie ve una dirección IP ni un rack en Frankfurt, así que la web tiene que hacer que esa infraestructura parezca real, rápida y propia. Ese era el reto de diseño de quantumproxies.net, una web solo en modo oscuro para un proveedor de proxies ISP, residenciales y móviles, y de los servidores para usarlos.

Este artículo va de las decisiones de diseño. Cómo se hizo, con IA y sin un solo archivo de Figma, está en el caso de estudio.

El hero no tiene foto ni ilustración. La marca de Quantum, dos órbitas alrededor de un núcleo, está dibujada con luz a través de una cuadrícula de celdas LED, renderizada en directo en el navegador.

Y reacciona. Si pasas el cursor por encima, las celdas que hay debajo se iluminan, con un pequeño retraso que hace que la luz parezca tener peso. Al hacer scroll, la cuadrícula se vuelve más fina, como si la señal se enfocara. Es la marca y la idea del producto a la vez: una señal que recorre la red allí donde apuntas.

La paleta es un casi negro y un solo azul, sacado directamente del logo de Quantum, con tonos más claros para los brillos y un verde para todo lo que está en directo. En lugar de bordes duros, finas líneas azules que se desvanecen en los extremos.

Los paneles son de cristal, así que cada uno toma el color de lo que brilla detrás. En una página oscura llena de luz azul, eso mantiene la interfaz en calma y el producto en primer plano.

En la primera ronda los titulares usaban una serif expresiva. El cliente pidió una tipografía de marca más sobria, así que ahora todos los titulares son Inter, en su versión display y con el espaciado ajustado, con la segunda línea en un tono más suave: “Proxies and servers / that don’t fail.”

Las pequeñas etiquetas numeradas de cada sección estaban al principio en una monoespaciada, y el cliente dijo que esa letra “grita IA”. Tenía razón. Ahora las etiquetas usan Archivo Expanded, una tipografía ancha que recuerda al logotipo QUANTUM PROXIES. Una monoespaciada, Ioskeley Mono, queda para lo suyo: IPs, código y datos.

Cada producto tiene su propio objeto: un conector de red para ISP, una casa de cristal para residencial, una tarjeta SIM para móvil y unidades de servidor. Son renders 3D en un mismo lenguaje de materiales (metal oscuro, cristal esmerilado y luz azul), así que se leen como una familia.

Los servidores fueron lo más difícil. El cliente quería que Dedicated, VPS y Root se distinguieran a simple vista, así que cada uno tiene su chasis: negro y abierto con el hardware a la vista, blanco perla con la tapa de cristal y plata cepillada. Los tres se ven exactamente desde el mismo ángulo, así que se apilan en un solo rack. Al apuntar a una unidad, se desliza hacia fuera como un cajón.

Quantum es dueña de sus ubicaciones, así que el mapa es la prueba. Es un mapa del mundo hecho de puntos con cinco ubicaciones marcadas: Frankfurt, Londres, París, Nueva York y Ashburn. Al apuntar a cualquier país, se ilumina en una onda desde el cursor, unos arcos trazan sus rutas hacia las cinco ubicaciones y una etiqueta muestra su bandera y su nombre. Las tarjetas de ubicación bajo el mapa se iluminan con él.

Las páginas de producto y las pantallas de cuenta usan los mismos materiales:

• Proxies residenciales: casas de cristal sobre una cuadrícula isométrica azul. Cuando cambia la IP de salida, un rastro de luz salta de tejado en tejado y la casa de destino se ilumina.
• Acceso: una composición abierta en lugar de recuadros, con una pila 3D “One account” y reseñas reales de Trustpilot.

Hasta las páginas más pequeñas tienen la misma luz, el mismo cristal y el mismo azul, así que nada en la web parece una plantilla.

En el móvil, el hero se apila con la marca arriba, el menú agrupa proxies y servidores, y el mapa muestra el mundo entero con los detalles debajo. Cada titular se comprobó en móvil, tablet y escritorio, para que nunca se corte una letra.