Un vistazo al proceso de diseño y desarrollo de OFF+BRAND para el sitio web inmersivo de Dialed, desde la dirección de arte y la fotografía de producto hasta el diseño y el desarrollo inmersivo.
La idea era elevar el nivel sin perder el toque rebelde: tipografía audaz, colores saturados y un punto de irreverencia. Traducir eso a una web significaba crear una interfaz capaz de transformarse con la misma fluidez que la propia línea de productos, y lograr que las latas en 3D, el café derramado y los papeles voladores se comportaran de forma creíble en el navegador, sin importar el dispositivo.
Así es como lo logramos.
Una página de inicio que cambia de look con cada producto
Manteniendo el carrusel como pieza central, buscamos crear una experiencia que permitiera al usuario entrar en una habitación distinta para cada lata. Al cambiar de sabor, la interfaz absorbe la paleta de colores, la tipografía y el lenguaje gráfico del producto destacado, mientras la lata flota dinámicamente en pantalla, rodeada de ingredientes 3D interactivos como granos de café, vainas de vainilla y trozos de chocolate.
Este dinamismo ayuda a impulsar la conversión al mantener a los usuarios interactuando con la cuadrícula de productos en lugar de pasarla de largo, especialmente cuando el objetivo principal del e-commerce es lograr que la gente presione el botón de compra.
También creamos un precargador para la página de inicio, pero terminamos optimizando tanto la escena WebGL que cargaba antes de que el precargador tuviera tiempo de reproducirse. La solución fue establecer una duración mínima para que se ejecutara. Un buen problema para tener.
Mientras nos enfocábamos en esto, seguimos avanzando en otras áreas del proyecto. En lugar de esperar a que todo estuviera finalizado, trabajamos por fases a medida que la marca y el producto evolucionaban. Esto creó una base maleable para el carrusel que podía adaptarse a los cambios en la marca, el producto y el contenido, manteniendo el proyecto en marcha sin perder impulso.
La dirección de arte fue audaz y sofisticada. Nos centramos en una tipografía que destacara y en imágenes que hablaran por sí solas, capturando tanto el ajetreo como el bajón del entorno laboral, algo que Dialed busca remediar.
Manteniendo la proporción del producto
Un desafío único fue generar una gran serie de imágenes de producto usando IA manteniendo la consistencia de escala entre diferentes renders; la misma lata cambiaba frecuentemente de altura y proporción. Más allá de la corrección de color en postproducción, experimentamos con varias soluciones, incluyendo el escalado según el contenido de Photoshop y la ingeniería de prompts dirigida. Tanto la herramienta como algunos prompts impredecibles de la IA produjeron efectos secundarios divertidos, además de mucha frustración cuando la IA simplemente no lograba el resultado preciso que necesitábamos.
Vale la pena señalar que la marca y el producto seguían tomando forma mientras esto se diseñaba y construía. En lugar de esperar a que todo estuviera finalizado, el proyecto se trabajó por fases, construyendo una base flexible que pudiera evolucionar a medida que la marca, la gama de productos y el contenido se desarrollaban. El enfoque se mantuvo en seguir avanzando, gestionar el cambio sin perder impulso y asegurar que los equipos creativos y técnicos permanecieran alineados mientras todo cambiaba bajo sus pies.
Más allá del diseño hacia WebGL: el lado técnico de la fluidez
Hace poco, empezamos a experimentar con la librería Wiggle Bones para animar las páginas de un libro en nuestro reciente sitio web para Trevor Noah. Sin embargo, esta vez el reto era animar documentos voladores, haciendo que se sintieran ligeros pero reactivos. Así que recurrimos al mismo sistema de nuevo.
Animamos los documentos usando un sistema de repulsión personalizado y dejamos que Wiggle Bones hiciera su magia, mientras los documentos eran empujados en todas direcciones.
Experimentamos con diferentes composiciones de huesos, pero esta, muy sencilla, fue la que más se acercó al comportamiento real de una hoja de papel.
Para la profundidad de campo, separamos los papeles en tres capas según su profundidad y renderizamos las dos últimas en pases de desenfoque dual Kawase independientes. El pase de desenfoque dual Kawase, combinado con una resolución de renderizado limitada, resultó ser muy rápido con desenfoques más intensos, que era lo que necesitábamos en la última capa.
Uno de los principales desafíos técnicos fue orquestar el DOM para que los elementos normales de la página pudieran situarse tanto por encima como por debajo del lienzo WebGL. En la transición más compleja del héroe, ciertos elementos debían aparecer entre la escena de papel y la lata 3D, algo que requirió más de un lienzo para resolverse. En lugar de ejecutar dos renderizadores separados (lo que significaría cargar algunos activos dos veces y añadir peso innecesario al código), el equipo utilizó un único renderizador que dibuja dos veces, y luego usó la función drawImage() para transferir el segundo fotograma renderizado al segundo lienzo.
Soltamos la sopa: cómo creamos el efecto de chorro líquido
No todos los efectos necesitan una compleja red de sombreadores para lucir bien. Un gran ejemplo es un chorro de líquido. Si miras un chorro en cámara lenta, verás que parece casi una textura estática con un brillo especial. Podríamos lograrlo fácilmente con una textura de ruido simple, ahorrando muchos recursos y aun así dándonos la oportunidad de añadir una interacción al pasar el cursor.
Para la interacción al pasar el cursor, usamos otra textura de ruido que se animaba lo suficientemente rápido como para crear ese efecto de distorsión en el chorro que vimos en nuestro video de referencia.
Este enfoque no solo nos ahorró muchos recursos, sino que también nos permitió trabajar con la referencia fotográfica de nuestro equipo de diseño sin comprometer el realismo de la composición.
Para el pie de página, decidimos llevar el experimento al mundo real (o mejor dicho, a la cocina) y capturar referencias de cómo las gotas de café derramado podrían interactuar con el logotipo. Observamos cómo caen las gotas de espresso y son absorbidas por el papel, mientras experimentábamos con nuestros dedos para estudiar cómo el café se extiende, se expande y se asienta de forma natural.
La idea que mejor funcionó se tradujo en SDF generativos dentro de un sombreador de fragmentos WebGL, usando refracción para crear un efecto líquido convincente directamente sobre el logotipo.
El resultado final
El sitio web de Dialed funciona porque los problemas de diseño y desarrollo se resolvieron juntos, no por separado. La dirección de arte "elevada y audaz" solo se sostiene porque las transiciones, la física y el trabajo de sombreado hacen que se sienta táctil en lugar de decorativo. Gran parte de esto se debió a resolver problemas pequeños y poco glamorosos (una lata que no mantiene su tamaño, un lienzo que debe estar por encima y por debajo del DOM) con el mismo cuidado que las grandes apuestas creativas.
Crea el tipo de sitio web que otros equipos estudian
Webflow ofrece a diseñadores y desarrolladores control total sobre el diseño y el movimiento, y el sitio que diseñas es el mismo que publicas.
