FIFTY: web conceptual de un estudio pensada para los primeros 50 milisegundos

FIFTY es un estudio ficticio de diseño digital con sedes en Lisboa y Berlín. VITON¹³ construyó el concepto en torno a una idea: juzgamos una web en unos cincuenta milisegundos, así que la web de un estudio tiene que decir lo suyo antes de que el visitante lea una sola palabra.

También tenía que ser pequeña. La web de un estudio funciona como tarjeta de visita: quiénes son, qué han hecho, dónde están y cómo empezar un proyecto. El reto era meter todo eso en unas pocas páginas, con movimiento, vídeo y un fondo en vivo, sin que pesaran demasiado.

7 páginas: portada, Work, página de proyecto, Studio, Contact con generador de briefs, aviso legal y una página 404. La portada se abre con un precargador que cuenta de 00 a 50 ms; después llegan un titular manifiesto sobre un fondo WebGL en vivo y una cuadrícula informativa con relojes en directo de los dos estudios, servicios, contacto y disponibilidad. El showreel se abre en un reproductor a pantalla completa.

El índice muestra 8 proyectos en lista, con una vista previa en vídeo que sigue al cursor, o en cuadrícula, con filtros por categoría. Cada página de proyecto tiene un vídeo a pantalla completa, un resumen que se ilumina al hacer scroll, el reto y el enfoque, los resultados y un enlace al siguiente proyecto. El panel del estudio entra desde la derecha, y la página de contacto arma un brief con servicios, presupuesto, plazos y detalles, y muestra una confirmación.

El recorrido clave es Trabajos → Proyecto → Contacto: el visitante repasa el índice, abre un caso y va directo al generador de briefs. Cada enlace interno barre la página con un panel negro que cuenta hasta 50 ms; los titulares aparecen letra a letra, los párrafos se iluminan con el scroll, las imágenes y los vídeos se revelan con clip-path, el vídeo se mueve con parallax, y un cursor con modo de fusión y etiquetas y una navegación magnética siguen al puntero.

El fondo es un shader WebGL escrito para esta web: ruido fractal con deformación de dominio en tonos de brasa que se inclina hacia el cursor, con una alternativa en CSS. El resto es HTML, CSS y JavaScript sin paso de compilación: la cabecera, el pie y las capas superpuestas salen de un único script compartido, GSAP con ScrollTrigger y Lenis llevan el movimiento y el scroll, los datos de demostración se quedan en el localStorage del navegador y no se envía nada a ningún sitio. Las fotos y los vídeos son fotografía y vídeo de stock con licencia de Unsplash y Pexels.

El concepto existe como 7 páginas con 8 proyectos y los relojes de dos estudios. Lighthouse midió la portada el 22 de septiembre de 2026. En móvil, con la limitación por defecto: rendimiento 89, accesibilidad 94, prácticas recomendadas 77 y SEO 100, con un LCP de 2,7 s y un CLS de 0. En escritorio: rendimiento 100, accesibilidad 94, prácticas recomendadas 77 y SEO 100, con un LCP de 0,5 s. La página pesa 2,1 MB en 13 solicitudes; son las mejores puntuaciones de rendimiento entre las webs conceptuales que VITON¹³ midió ese día.

Las comprobaciones sobre las 6 páginas renderizadas en Chrome (sin la 404) encontraron un título único y un solo H1 en cada página, el atributo lang con valor en, un diseño que cabe en 390 px sin scroll horizontal, texto alternativo en el 100 % de las imágenes y 0 enlaces internos rotos. Canonical, Open Graph y datos estructurados están en 0 de 6 páginas, y no hay sitemap.xml ni robots.txt.

FIFTY es un concepto que VITON¹³ creó para mostrar su alcance, no un proyecto encargado. El estudio, su equipo, sus proyectos y sus direcciones son ficticios. La web no tiene dominio, ni visitas, ni tráfico de búsqueda, ni solicitudes: el generador de briefs no envía nada. Las fotos y los vídeos son fotografía y vídeo de stock con licencia de Unsplash y Pexels, no trabajos del estudio.

Las puntuaciones de Lighthouse son mediciones de laboratorio de la portada en un solo día, no datos de visitantes reales; las páginas de proyecto con vídeo a pantalla completa no se midieron. Un SEO de 100 solo cubre lo básico. Los cincuenta milisegundos son el tema de la web: este caso no mide lo rápido que se forman una opinión los visitantes reales ni demuestra que la web le traería encargos a un estudio.