10 siti incredibili dove l’esperienza immersiva diventa un viaggio nell’ambiente virtuale

Scopriamo le tecniche e le migliori modalità espressive per un viaggio digitale coinvolgente ed efficace

Enrica Ferrero
TIDE

--

Dopo settembre, il mese dei buoni propositi, arriva ottobre a riportarci con i piedi per terra. I viaggi estivi sono ormai un ricordo lontanissimo e c’è chi si consola pensando alle vacanze natalizie.

Invece per noi di TIDE questo è il momento perfetto per una nuova Digital Temptation pronta a stupirti: 10 siti per viaggiare all’interno dell’ambiente virtuale attraverso un’esperienza totalmente immersiva. Questa modalità di esplorazione è molto vicina al mondo del gaming per strutture e tecniche, che permettono di rendere più realistica l’esperienza virtuale.

Ogni sito presenta caratteristiche tecniche e stilistiche differenti che donano all’esperienza un fascino unico e particolare, dal 3D iperrealistico a quello stilizzato , dal video alla fotografia a 360°, passando per l’illustrazione. Ecco una top 10 trasversale dal punto di vista contenutistico, per varietà di temi trattati, ma accumunata dalla stessa caratteristica espressiva.

Non ti resta che scoprire le tentazioni e viaggiare con la mente!

📝 Questo articolo è scritto a quattro mani con

PENDERECKI GARDEN

1- PENDERECKI GARDEN

Krzysztof Penderecki è stato uno dei più importanti compositori del XX secolo, grande appassionato di giardinaggio, fu proprietario di uno splendido giardino non lontano da Cracovia. Penderecki Garden rappresenta un omaggio ad entrambe le passioni del compositore: la musica e il giardinaggio. L’utente è trasportato all’interno della rappresentazione virtuale del luogo, composta da vivaci punti colorati che aleggiano sospesi, come mossi dal vento e a ritmo di musica, in un’atmosfera di suggestivo realismo.

La tecnica di realizzazione integra il render 3d dell’ambientazione, ricreato attraverso la tecnica del laser scanner con l’utilizzo dei droni, e l’illustrazione per i dettagli degli alberi. La fruizione del sito è arricchita da varie modalità di navigazione e un’attenzione particolare è rivolta al tema dell’accessibilità, grazie al regolatore di contrasto.

PENDERECKI GARDEN

#3d laser scanner #accessibilità #visual&sound

TOMAS BATA UNIVERSITY

2- TOMAS BATA UNIVERSITY

L’università ceca Tomas Bata celebra 20 anni dalla sua inaugurazione attraverso un sito che ricrea in 3D gli spazi del campus e permette al “visitatore” un tour virtuale nei luoghi e nella storia dell’università.

Attraverso una rappresentazione 3D stilizzata dell’ambiente, l’utente può navigare dall’alto tra gli edifici e i luoghi più rappresentativi del campus che diventano Call To Action, evidenziate in hover da fasci di luce. Le transizioni tra le pagine sono enfatizzate da animazioni e suoni ispirati al mondo del gaming . Un cursore a girella accompagna l’utente attraverso una visita dell’università a tappe, alternativa alla modalità di esplorazione libera.

TOMAS BATA UNIVERSITY

#3D stilizzato #visita virtuale #video transition

ÉCOLE ÉMILE COHL

3- ÉCOLE ÉMILE COHL

La sensazione di eccitato smarrimento del primo giorno di scuola accompagna l’utente che naviga il sito della scuola francese Émile Cohl.

Anche in questo caso viene proposta una visita virtuale del campus, con l’obiettivo però di raccontarne la proposta formativa con un’esperienza immersiva vissuta dall’utente in prima persona. Attraverso contenuti video a 360° si ha l’illusione di trovarsi nei corridoi e nelle aule dell’edificio, popolati da alunni e professori intenti nelle loro mansioni. La hall funge da homepage virtuale, in cui card dei vari contenuti si sovrappongono allo sfondo con un accostamento studiato e dinamico.

Mancano contenuti audio, che avrebbero forse reso l’esperienza davvero completa.

ÉCOLE ÉMILE COHL

#video 360° #ripresa soggettiva #dinamismo

CHARTOGNE-TAILLET

4- CHARTOGNE-TAILLET

L’azienda vitivinicola Chartogne-Taillet ha scelto di proporre i propri prodotti partendo dai terreni dove vengono coltivate le materie prime.

Il visitatore può esplorare la sua tenuta attraverso una mappa illustrata tridimensionale creata con una line art che rievoca lo sketch a mano. La UI riprende lo stile delle immagini di un archivio storico e trasmette tutta la storia e territorialità dell’azienda, anche grazie all’uso del font calligrafico Shipley Regular. Varie tecniche rappresentative accompagnano l’utente nella sua esplorazione, dalla panoramica dall’alto del territorio, all’effetto acquerello delle vigne che diventano poi bollicine per raccontare il prodotto finale. Il risultato è un racconto immersivo poetico e molto caratteristico che evoca la passione e le tipicità del prodotto.

CHARTOGNE-TAILLET

#3d illustrato #coinvolgimento evocativo #retail

FINELY CRAFTED

5- FINELY CRAFTED

Cosa può nascere dalla collaborazione tra Shoes Surgeon e Jack Daniel’s? Questo sito racconta com’è nata la collezione personalizzabile di scarpe ispirate ai famosi prodotti di distilleria.

Lo store 3D, dettagliato e ricco di particolari, fonde l’atmosfera da lounge bar con l’artigianalità di un laboratorio da calzolaio. I contenuti di approfondimento sono raccontati in modo da evocarne le sensazioni fisiche e materiche, come nel consultare la moodboard di progettazione. La UI riprende la palette colori della collaborazione, ispirata ai distillati, dai toni del marrone e del miele accostati al bianco e nero. C’è una sorpresa social per chi completa la fruizione dei contenuti!

FINELY CRAFTED

#gamification #3D realistico #visita virtuale

SAVE THE RAINFOREST

6- SAVE THE RAINFOREST

Sorvolando la foresta pluviale tra pappagalli colorati e nuvole dense di pioggia ci si immerge nel sito dell’associazione norvegese Regnskofondet, finalizzato a raccogliere fondi per la conservazione di questo fragile ambiente naturale.

La vista aerea, realizzata tramite una ricostruzione 3D animata del luogo, restituisce all’utente una panoramica di questo ambiente. Addentrandosi poi nella foresta l’utente scopre nel dettaglio l’ambiente attraverso un’altra modalità immersiva, ricreata tramite una fotografia a 360°. Ulteriori dettagli vengono raccontati da immagini e video, completando una matriosca stilistica, in cui ad ogni livello di approfondimento corrisponde una tecnica rappresentativa.

SAVE THE RAINFOREST

#vista panoramica #fotografia 360° #sensibilizzazione

LEROY MERLIN

7- LEROY MERLIN

Presentare gli oggetti di arredamento all’interno del contesto realistico di un ambiente domestico, è certamente un modo efficace per proporli e raccontarli, coinvolgendo l’osservatore. Così Leroy Merlin per una pubblicazione speciale della sua sezione “inspiration” presenta le proprie soluzioni di arredamento ricreando alcune stanze tridimensionali, ciascuna per ogni ambiente della casa, che l’utente può esplorare orientandone l’angolazione.

L’attenzione al dettaglio e la resa grafica sono così realistici da portare a pensare “qualcuno ha dimenticato di chiudere il rubinetto della doccia”.

LEROY MERLIN

#3D realistico #assonometria #interior design

MARSEILLES 2021 BY LA PHASE 5

8- MARSEILLES 2021 BY LA PHASE 5

Lo studio di comunicazione francese La Phase 5 ha realizzato per Marsiglia una vetrina digitale della città, per raccontare e promuoverne i luoghi più significativi. Le modalità di navigazione richiamano Google Maps, sfruttandone la familiarità acquisita dagli utenti, impreziosita però da una resa grafica originale e accattivante. . Dalla mappa in rilievo della città arricchita con accostamenti cromatici e animazioni, agli spazi in fotografia a 360° dove i testi diventano parte integrante di ambienti interni ed esterni.

MARSEILLES 2021 BY LA PHASE 5

#rilievo #streetview #typography

ANNOYING MUSEUM

9- ANNOYING MUSEUM

Nell’anno 3000 le esperienze più noiose vissute dai clienti, come l’attesa telefonica accompagnata dalle 4 stagioni di Vivaldi prima di parlare con un operatore, saranno cimeli storici conservati nel museo delle esperienze noiose.

È l’ironica provocazione lanciata dall’azienda Zendesk specializzata nel supporto al servizio clienti, per sottolineare l’importanza di un servizio professionale ed efficiente.

Soggetto dell’esplorazione utente è in questo caso un ambiente tridimensionale immaginario, minimale e sintetico, presentato solamente attraverso oggetti chiave e dalla prospettiva insolita in isometria, restituendo all’utente un effetto di sospensione, sia spaziale che temporale.

ANNOYING MUSEUM

#3D isometrico #museo virtuale #ironia espressiva

TRIBUTE TO BEAU

10- TRIBUTE TO BEAU

Tribute to beau è una poesia digitale, un esercizio di stile che porta al caso limite il concetto di esplorazione immersiva.

L’utente segue in scroll down il percorso in un movimento parabolico che inizia alto nel cielo, si avvicina agli edifici della metropoli illuminata, per poi risalire lontano nello spazio. Il viaggio è accompagnato da parole e versi che compaiono nel cielo come stelle richiamando evocazioni romantiche. Nella parte conclusiva l’esplorazione è guidata, attraverso un video in sinergia con il brano di Edith Piaf che inverte e ribalta la prospettiva, trasportando l’utente in un turbine emozionante.

TRIBUTE TO BEAU

#scroll down #arte digitale #sound design

Conclusione

Dopo questo viaggio tra siti di prodotti e luoghi (reali o immaginari) siamo pronti per raccogliere gli spunti da portare a casa per nuovi progetti immersivi.

Prima di tutto possiamo domandarci: cosa voglio trasmettere con quest’esperienza utente? Si può raccontare un prodotto tramite le sue lavorazioni, evocare i messaggi del brand attraverso l’esplorazione di un luogo virtuale, oppure creare contenuti digitali inediti rispetto alle possibilità della realtà offline. Questa scelta potrà aiutarti nell’utilizzare gli spunti successivi!

1. Scegliere la modalità di immersione: come per qualsiasi progetto, il punto di vista fa la differenza! L’esplorazione in prima persona permette di focalizzare l’attenzione su dettagli e step del racconto enfatizzando l’esperienza soggettiva. La vista panoramica mostra la visione d’insieme per comunicare all’utente la totalità del progetto e i valori generali. In entrambi i casi, le modalità espressive propongono un ordine di lettura, ma lasciano libero l’utente di scegliere quali contenuti esplorare.

2. Studiare UI e UX accuratamente: nell’esperienza immersiva la UI ha un ruolo fondamentale perché determina lo stile, il grado di realismo e d’impatto del sito. D’altra parte, la UX accompagna la navigazione con scelte di progettazione coerenti, proponendo differenti modalità di esplorazione (manuale o guidata) e di approfondimento.

3. Accompagnare l’esperienza con il sound adatto: il suono completa l’esperienza utente, supportando il visual, ma ricordati di permettere all’utente di silenziarlo.

Dopo tutto, un po’ di svago può anche essere utile! E con Digital Temptation lo abbiamo dimostrato. Sperando di averti ispirato, noi Tiders torniamo a viaggiare con la mente e ti aspettiamo al prossimo appuntamento con nuove tentazioni!

--

--

Enrica Ferrero
TIDE

Systemic & Product Designer || Community Communication Specialist & Writer @TIDE || Dynamic, flexible and methodical