--- title: "Web design interattivo" date: 2026-10-18 language: it topics: ["web", "webdesign", "work"] source_url: https://willem.com/it/2026-10-18_web-design-interattivo/ --- # Web design interattivo *Ma, è anche divertente?!* > 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! ## 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](https://gpcardio.org/en/) è 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! ![gpcardio.org: trascina il globo e le lezioni più recenti gli orbitano intorno; un tocco ne apre una](https://willem.com/global/images/8fd47fd1a37f.webp) [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à! ![L'opera d'arte, portata in vita: la partenza, i puntini che rispondono al dito o al mouse, le parole e la gara](https://willem.com/global/images/043d88dd9515.webp) ## 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! ![Piano dopo piano, poi la scansione: ogni piano prende il colore del suo stato](https://willem.com/global/images/5691f6a2e646.webp) ## 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. ![Tocca un collega: tutti hanno qualcosa da dire](https://willem.com/global/images/886e5604e762.webp) 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. ![Quattro domande, un consiglio: chi si mette in malattia si sdraia](https://willem.com/global/images/67fc011c74e2.webp) ## Veloce mentre si muove Costruisco tutto questo su anni di esperienza con la tecnologia dei videogiochi: da [Snake '97](https://willem.com/en/2026-02-25_three-games-in-three-weeks/) a [Protect Your Eggs](https://willem.com/en/2026-09-13_protect-your-eggs/), un gioco che ho fatto con mio figlio di sette anni, fino ai [dati degli allenamenti in 3D](https://willem.com/en/2025-03-10_workout-data-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](https://gpcardio.org/en/) | 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à](https://willem.com/en/about/). 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](https://willem.com/en/#contact)!