L’utilizzo di effetti, animazioni, illustrazioni e tipografia 3d all’interno della grafica di siti web è ormai un trend in crescita continua.
E anche nel 2024 lo troviamo come punto tra i vari trend che continueranno la loro diffusione.
Ma quali elementi 3D possiamo inserire all’interno di un sito web? E in che modo?
Il 3D viene utilizzati principalmente:
- Per creare una navigazione maggiormente interattiva e coinvolgente per l’utente;
- Inserendo elementi visivi, come icone, forme astratte e illustrazioni, che evidenziano i toni più tecnologici di un brand;
- Utilizzando elementi tipografici in 3D, con l’obiettivo di aumentare le intersezioni tra testi ed altri elementi visivi.
Entriamo un po’ più nel dettaglio!
Navigazione 3D in un sito web
Uno dei principali trend sull’utilizzo del 3D è la creazione di una navigazione che permette di muoversi all’interno del sito web non più solamente in verticale e in orizzontale ma simulando la profondità dello schermo.
Questo tipo di navigazione può presentarsi in diverse modalità, come ad esempio:
- Tramite il movimento del mouse, l’utente si sposta liberamente nello spazio tridimensionale;
- Abbinando allo scroll un movimento in profondità nello schermo, invece del classico movimento in verticale, l’utente ha la sensazione di muoversi in uno spazio tridimensionale.
Il primo caso si avvicina molto alla modalità con cui gli utenti possono muoversi nello spazio all’interno di alcuni videogame, mentre il secondo, con maggiori vincoli, porta l’utente comunque a spostarsi all’interno di un percorso già predeterminato dai realizzatori del sito web.
In entrambi i casi, è usuale che siano presenti pulsanti o animazioni che segnalano all’utente la tipologia di interazione necessaria per scoprire i vari contenuti del sito web.
Per chiarire meglio questi concetti, vediamo alcuni esempi.
Alcuni Esempi
Il primo esempio è una mappa interattiva di un complesso immobiliare che permette di esplorare i vari quartieri attraverso una vera e propria mappa 3D.
Questo è il caso classico che permette all’utente di muoversi liberamente, senza percorsi predeterminati, spostandosi nello spazio 3D con il movimento del mouse.
Gli elementi interattivi sono evidenziati dai pallini rossi che, se cliccati, permettono di visualizzare le foto dei vari complessi abitativi.
Il secondo esempio è il sito di una web agency specializzata in esperienze immersive.
In questo caso il movimento all’interno dello spazio è solamente simulato. Scrollando la pagina, invece di muoversi verticalmente, entriamo sempre più all’interno dello schermo, scoprendo i servizi che l’agenzia offre.
Questo tipo di soluzione ha una funzione più estetica che funzionale, aumentando l’impatto visivo e l’interazione tra utente e prodotto digitale.
Vediamo altri utilizzi del 3D nei siti web.
Forme astratte 3D
Le forme astratte 3D sono sempre più diffuse all’interno dei materiali di comunicazione.
Capita di trovarle in campagne ADV, materiale istituzionale, slide e anche all’interno di siti web aziendali.
Questi elementi sono particolarmente utilizzati da brand fortemente tecnologici, come ad esempio aziende di sviluppo software, SAAS o AI.
Anche in questo caso la funzione è più estetica che funzionale e, di conseguenza, l’utilizzo è vincolato alla brand identity.
Vediamo alcuni esempi.
Alcuni Esempi
Nel sito web di questa designer sono diversi gli elementi astratti tridimensionali utilizzati.
Nella prima sezione l’illustrazione 3D utilizzata nello sfondo è anche animata, trasmettendo così una sensazione di fluidità.
In questo caso gli elementi 3D sono pienamente coerenti con la comunicazione di una libera professionista specializzata in design digitale.
Per quali aziende è quindi consigliato l’utilizzo di questa tipologia di illustrazioni?
Come già accennato:
- Aziende altamente tecnologiche;
- Aziende nel settore delle produzioni creative o multimediali;
- Liberi professionisti, architetti, designer.
Illustrazioni 3D in siti web
Anche le illustrazioni 3D sono sempre più diffuse all’interno di siti web e piattaforme digitali.
Le illustrazioni possono essere utilizzati in svariati modi:
- Come immagini, per accompagnare il testo aumentando l’impatto estetico nelle pagine del sito web.
- Come icone, per rappresentare elementi o funzionalità chiave di un prodotto;
- Come avatar, per rappresentare un prototipo di buyer persona.
Vediamo degli esempi per ciascuna modalità di utilizzo.
Alcuni Esempi
Il primo esempio è il sito web di un servizio che permette ad artisti e produttori musicali di autopromuoversi.
In questo caso le illustrazioni 3D sono utilizzate per mostrare le principali funzionalità di una piattaforma digitale, sia come immagini che come vere e proprie icone.
Le icone 3D inoltre si abbinano perfettamente alla navigazione non lineare del sito web, fornendo una sensazione di movimento nello spazio.
Il secondo esempio è il sito web di una tipografia che stampa anche oggetti 3D, come ad esempio espositori da banco.
Gli oggetti in questo caso sono rappresentati attraverso dei rendering tridimensionali tra cui è possibile navigare attraverso dei caroselli che si muovono attraverso la profondità dello spazio.
Illustrazioni 3D, come detto, possono essere utilizzate per rappresentare gli avatar di clienti o potenziali clienti.
Nel sito People 3D è possibile scaricare una vasta serie di personaggi 3D in diverse pose, utilizzabili all’interno del proprio sito web.
Tipografia 3D nei siti web
Anche la tipografia 3D è sempre più diffusa all’interno di siti web, manifesti pubblicitari e altri strumenti di comunicazione.
L’utilizzo di tipografia 3D aumenta l’impatto visivo di composizioni che utilizzano lettere, punteggiatura ed altri elementi tipografici, permettendo una maggiore interazione con gli altri elementi della composizione.
La tipografia può usare lo spazio tridimensionale in diversi modi:
- Da un lato, inserendosi sulle facciate di elementi tridimensionali;
- Dall’altro creando dei testi che sono effettivamente elementi 3D.
Alcuni Esempi
Nel primo esempio, il sito visualtrack, gli elementi tipografici sono inseriti all’interno di due parallelepipedi che ruotando permettono di leggere la UVP del brand.
Nel secondo esempio, il sito di GDK, nella prima sezione della homepage il logo dell’azienda si presenta in 3 dimensioni, con un effetto molto simile ai wordart degli anni 90.
