Ricostruzione / E-commerce 3D / UI Immersiva

Drake Related

Ricostruire Drake Related, pixel per pixel

Drake Related è una delle esperienze di e-commerce più insolite online, nel senso migliore del termine: una casa 3D esplorabile dove si vaga per le stanze e si acquista ciò che vi si trova. L'arredamento è il catalogo. L'abbiamo ricostruita in Webflow, stanza per stanza, con lo stesso aspetto isometrico, le stesse interazioni di acquisto, la stessa sensazione di esplorazione, su una piattaforma che nessuno sceglierebbe mai per un lavoro del genere.

Panoramica

Questo progetto era per noi. Volevamo superare i nostri limiti, non servire un cliente, e abbiamo misurato il risultato rispetto all'originale senza pietà. Tre stanze, ogni oggetto collegato a un prodotto reale, il tutto realizzato su Webflow Ecommerce.

Il problema che ci siamo posti

drakerelated.com stabilisce uno standard elevato. Stanze isometriche cinematografiche, illuminazione suggestiva, oggetti che si trovano esplorando anziché scorrendo. Il sito ufficiale costruisce quel mondo da immagini isometriche pre-renderizzate anziché da un motore in tempo reale, una tecnica in cui siamo specializzati. Quindi la domanda era semplice da porre e difficile da rispondere: potevamo raggiungere quella qualità su Webflow, una piattaforma che nessuno associa al commercio immersivo, e far sì che il risultato reggesse un confronto diretto con l'originale?

Tre cose dovevano riuscire contemporaneamente. L'aspetto, con stanze, illuminazione e composizione riprodotte secondo lo standard dell'originale. L'interfaccia, che traduce un modo spaziale, simile a un gioco, di muoversi in uno spazio in qualcosa che funziona su uno stack web standard ma che dà comunque la sensazione di un luogo in cui si entra. E la giunzione tra l'esplorazione di una stanza e l'acquisto di un oggetto, unita così pulitamente che non si vede mai.

Come abbiamo affrontato il problema

L'arte delle stanze copia il metodo dell'originale. Scene isometriche pre-renderizzate, hotspot interattivi posizionati con precisione sugli oggetti. Questo mantiene ogni stanza con una qualità cinematografica completa su qualsiasi dispositivo, caricandosi velocemente, posizionando ogni prodotto esattamente dove la composizione lo ha previsto.

Abbiamo diviso l'esperienza intenzionalmente. Le stanze rimangono scure e suggestive, svolgendo il compito di attirarti e creare il desiderio. Tocca un oggetto e la scena scompare, lasciando il posto a una pagina prodotto pulita e luminosa. L'originale traccia la stessa linea tra scoperta e acquisto, e noi l'abbiamo mantenuta. Una superficie seduce, l'altra vende, e nessuna delle due si confonde con l'altra.

Il negozio stesso è un semplice Webflow Ecommerce nativo. Questo era il punto. Lascia che lo strato espressivo si concentri sull'atmosfera quanto vuole, e lascia che carrello, pagine prodotto, quantità e checkout si basino su un'infrastruttura che sa già come gestire le parti noiose e critiche. Investi lo sforzo dove un visitatore lo vedrà. Lascia stare l'infrastruttura.

Cosa Abbiamo Realizzato

Un mondo completamente acquistabile. Tre stanze da esplorare, ogni oggetto cliccabile, ogni clic collegato a un negozio funzionante.

  • Tre stanze a tema: Studio, Lounge e Camera da letto, ognuna con la propria palette, illuminazione e atmosfera, proprio come l'originale conferisce un carattere a ogni stanza.
  • Interattivo hotspot degli oggetti: Indicatori pulsanti discreti ed etichette prodotto al passaggio del mouse che invitano al clic senza appesantire la scena.
  • Mappatura oggetto-prodotto: Ogni elemento visibile, un pallone da basket, una felpa con cappuccio, una lampada, rimanda alla propria pagina prodotto.
  • Pagine prodotto Webflow native: Viste dettagliate pulite e luminose con immagini, prezzo, descrizione e pulsante aggiungi al carrello, distinte appositamente dall'estetica dell'ambiente.
  • Carrello e checkout persistenti: Un carrello a scomparsa con controlli di quantità e un subtotale aggiornato in tempo reale che ti segue di stanza in stanza su Webflow Ecommerce.
  • Navigazione tra le stanze: Un menu fisso in alto e frecce direzionali ti guidano tra gli ambienti mentre il carrello mantiene il suo stato.
  • Rendering responsivo della scena: Grafica isometrica ad alta fedeltà che rimane nitida e veloce su tutte le dimensioni dello schermo.
Drake Related

Porta il tuo negozio online

Lascia ai tuoi clienti la libertà di esplorare il tuo business a 360°, dalla comodità di casa.

SEE ALSO

Other projects from our lab

Cyberpunk Redone Mockup
VISUAL / UI / TERMINAL

Cyberpunk Redone

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Fallout Terminal Mockup
VISUAL / UI / TERMINAL

Fallout Terminal

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Drake Rebuild Mockup
3D / SPACIAL EXPERIENCE / E-COMMERCE

Drake Related

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Italian Flag
Italian