projecte · 2024

Disseny web 3D llançament New Cosmos

Dyresel preparava el llançament del seu pilot New Cosmos SPL 2030 i disposava d'un recurs valuós: el model 3D del producte. La pàgina web de presentació es va construir a partir d'aquest. El pilot es forma a la pantalla, s'il·lumina i mostra les seves característiques, les seves mides i les seves variants a mesura que el visitant avança.

Disseny web 3D llançament New Cosmos
Cliente
Dyresel
Fabricant de sistemes elèctrics i il·luminació per a vehicles industrials
Agencia
Aspid Marketing
Concepte creatiu i direcció de campanya
Desarrollo
Estudi Zeta
Año
2024
Stack
  • HTML
  • Threjs
  • GSAP
  • Lenis
Ver web

Un llançament amb el model 3D com a punt de partida

Un pilot de senyalització és un producte tècnic. El seu valor és en el disseny, en la qualitat de la llum, en unes mides concretes i en una gamma de variants, i tot això sol quedar repartit entre una fitxa tècnica i unes fotografies. Per al llançament del New Cosmos SPL 2030, Dyresel volia una presentació a l'altura del producte.

El punt de partida el va donar el mateix procés de fabricació: existia un model 3D del pilot. Aquest arxiu, pensat per dissenyar i produir, podia tenir una segona vida com a peça central del web de llançament. La proposta d'Estudi Zeta va ser portar-lo al navegador i construir la pàgina al seu voltant.

Una pàgina web 3D on el producte es construeix en pantalla

El web es va desenvolupar amb Three.js, la tecnologia que permet mostrar i animar models 3D directament al navegador, sense instal·lar res i des de qualsevol dispositiu. En entrar a la pàgina, el pilot es va formant en pantalla al ritme del visitant.

Característiques i mides presentades sobre el mateix model

Les característiques apareixen al costat del model, cadascuna amb la seva icona, en el moment del recorregut que li correspon. Les mides del pilot es mostren directament sobre el producte, amb la claredat d'un plànol i la presència de la peça real.

El resultat ordena la lectura: qui visita la pàgina rep les dades de la fitxa tècnica, i cada dada arriba quan el model l'està mostrant.

Les variants de color, presentades una a una

La gamma de variants tanca el recorregut. Cada versió del pilot es mostra com una capa i dona pas a la següent a mesura que s'avança, de manera que el visitant recorre tot el catàleg del producte sense abandonar la pàgina ni perdre el fil de la presentació.

El mateix web 3D al mòbil

L'experiència al mòbil conserva tot el recorregut: la formació del model, la il·luminació, les característiques, les mesures i les variants funcionen igual que a l'escriptori, adaptades al format vertical de la pantalla. El web 3D complet viatja a la butxaca, llest per mostrar-se en una reunió o en una fira.

Disseny web 3D per a un llançament de producte

Una pàgina web 3D converteix el llançament en una presentació visual única. Distribuïdors, enginyers i clients examinen el producte des de qualsevol lloc, amb la informació tècnica en el seu context i el producte en moviment.