Web design interattivo

Riassunto

Un sito web non deve essere per forza un opuscolo da scorrere via. Sempre più spesso faccio siti interattivi, pagine con cui si può giocare: un globo che fai girare, opere d'arte che si scostano al passaggio del dito, edifici che si costruiscono da soli e ometti che ti rispondono. In questo articolo ne mostro quattro!

Testo completo

Giocare

Le persone ricordano ciò che hanno toccato. Una pagina che risponde al mouse o al dito invita a guardarsi intorno, a provare qualcosa, a fermarsi un po' di più. Una volta era difficile: tecnologia 3D complessa, chip lenti nei telefoni, una batteria che si scarica... complicato! Ma grazie a un'ottimizzazione estrema e a pipeline AI automatizzate ora posso alzare l'asticella molto più in alto! ADESSO SI PUÒ, SI PUÒ DAVVERO!!

Guarda il filmato qui sotto per vederlo in azione:

Un globo per la cardiologia

gpcardio.org è il Global Primary Care Cardio Network: lezioni, aggiornamenti delle linee guida e una rassegna della letteratura sulla cura del cuore, dei reni e del metabolismo, per i medici di base. La home page è un globo di puntini con le società collegate segnate sui loro paesi. Le lezioni e gli aggiornamenti più recenti gli orbitano intorno come schede. Trascina il globo e il mondo gira, tocca una scheda e si apre la lezione, scegli un chip e restano solo i video. BAM, IL MONDO INTERO! Questo sì che è dare forma a un'ambizione davvero globale!

[action1]

Opere d'arte che corrono

Per un evento sportivo ho dato vita alle illustrazioni della designer, con shader 3D e WebGL. All'inizio le corsie esplodono fuori dall'ovale, seguite dai coriandoli. I puntini dei retini rispondono al dito o al mouse, le corsie scattano quando scorri, gli sport corrono verso un traguardo con un vincitore diverso ogni volta, e un orologio gigante conta alla rovescia fino al giorno dell'apertura. Il disegno dal vivo coincide con l'originale per il 99,3% dei pixel, ma è almeno il 300% più divertente grazie all'interattività!

Edifici che si costruiscono da soli

Per una società di ingegneria per edifici e impianti, quattro torri si montano piano dopo piano. Poi una linea di scansione colora ogni piano in base al suo stato, e l'immagine si assesta in tetti verdi: lo stato finale sostenibile. Muovi il mouse e la scena ruota con te. Più in basso, tutti i servizi corrono lungo il processo di costruzione su un unico binario orizzontale, e tre anelli scivolano insieme mentre scorri. Dinamica negli immobili fissi? NESSUN PROBLEMA!

Ometti

Per un servizio di medicina del lavoro ho dato un volto alla figura del loro logo. Passa sopra a uno di loro e sbircia, toccalo e salta, balla o sviene e si rialza, con qualcosa da dire. Piovono nella pagina mentre scorri, e una folla intera si ordina in 20, 60 e 20 per cento: assenza per cause mediche, per circostanze personali e per cause legate all'organizzazione.

Il consulente dei pacchetti fa quattro domande. A ogni risposta gli ometti cambiano: più colleghi, lavoratori flessibili, e chi si mette in malattia si sdraia. Il consiglio mostra quanto costa ogni pacchetto all'anno, e puoi portarlo direttamente all'iscrizione o chiedere una chiamata. Malattia e assenza non sono divertenti, ma una figurina che crolla lo è tanto di più, e proprio quel sorriso dà alla proposta, altrimenti seria, il suo impatto positivo.

Veloce mentre si muove

Costruisco tutto questo su anni di esperienza con la tecnologia dei videogiochi: da Snake '97 a Protect Your Eggs, un gioco che ho fatto con mio figlio di sette anni, fino ai dati degli allenamenti in 3D. Le scene 3D vengono disegnate in un worker accanto alla pagina, così la pagina resta libera di rispondere. Disegnano solo quando qualcosa cambia e si fermano un secondo dopo l'ultimo tocco. Gli ometti sono semplici SVG e CSS. Dietro ogni scena 3D c'è un'immagine fissa, per il primo rendering, per i telefoni che non riescono a disegnarla e per i visitatori che preferiscono meno movimento. Nessun framework e nessuno script di terze parti: le tre pagine concept pesano tra 0,15 e 0,46 MB.

Misurato con Lighthouse, lo strumento dietro Google PageSpeed Insights, prestazioni sulla home page, telefono / laptop:

| | Prestazioni | Contenuto più grande (telefono) | |---|---|---| | gpcardio.org | 96 / 100 | 2,9 s | | L'evento sportivo | 99 / 100 | 1,8 s | | La società di ingegneria | 100 / 100 | 1,4 s | | Il servizio di salute e sicurezza | 99 / 100 | 2,1 s |

Lighthouse 13.5, mediana di tre test per pagina, 18 e 19 ottobre 2026.

Conclusione

È anche divertente?! Me lo chiedeva sempre un saggio professore all'università. Oggi applico quella 'lezione' con grande piacere: il web design interattivo è più di una piccola decorazione. Parla di ottimismo e di un impatto duraturo che gioca con la curiosità naturale! Vuoi riflettere anche tu sulle possibilità creative, su una pagina che la gente vuole toccare? Scrivimi pure!