{
 "id": 82164,
 "slug": "2026-10-18_web-design-interattivo",
 "url": "https://agents.willem.com/it/posts/2026-10-18_web-design-interattivo/",
 "source_url": "https://willem.com/it/2026-10-18_web-design-interattivo/",
 "language": "it",
 "date": "2026-10-18",
 "published": "2026-10-18T00:00:00+02:00",
 "created": "2026-10-19T10:03:04.766000+02:00",
 "updated": "2026-10-20T09:22:37.257000+02:00",
 "title": "Web design interattivo",
 "subtitle": "Ma, è anche divertente?!",
 "summary": "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!",
 "topics": [
  "web",
  "webdesign",
  "work"
 ],
 "author": {
  "name": "Willem L. Middelkoop",
  "url": "https://willem.com"
 },
 "provenance": {
  "kind": "model",
  "method": "Claude Sonnet, two passes (translation, then proofreading) against a glossary and hunspell",
  "date": "2026-10-20",
  "reviewed_by_native_reader": false,
  "language": "it",
  "source_language": "en"
 },
 "translations": [
  {
   "language": "en",
   "title": "Interactive Webdesign",
   "url": "https://agents.willem.com/en/posts/2026-10-18_interactive-webdesign/",
   "source_url": "https://willem.com/en/2026-10-18_interactive-webdesign/"
  },
  {
   "language": "nl",
   "title": "Interactief Webdesign",
   "url": "https://agents.willem.com/nl/posts/2026-10-18_interactief-webdesign/",
   "source_url": "https://willem.com/nl/2026-10-18_interactief-webdesign/"
  },
  {
   "language": "de",
   "title": "Interaktives Webdesign",
   "url": "https://agents.willem.com/de/posts/2026-10-18_interaktives-webdesign/",
   "source_url": "https://willem.com/de/2026-10-18_interaktives-webdesign/"
  },
  {
   "language": "es",
   "title": "Diseño web interactivo",
   "url": "https://agents.willem.com/es/posts/2026-10-18_diseno-web-interactivo/",
   "source_url": "https://willem.com/es/2026-10-18_diseno-web-interactivo/"
  },
  {
   "language": "fr",
   "title": "Webdesign interactif",
   "url": "https://agents.willem.com/fr/posts/2026-10-18_webdesign-interactif/",
   "source_url": "https://willem.com/fr/2026-10-18_webdesign-interactif/"
  },
  {
   "language": "pt",
   "title": "Design web interativo",
   "url": "https://agents.willem.com/pt/posts/2026-10-18_design-web-interativo/",
   "source_url": "https://willem.com/pt/2026-10-18_design-web-interativo/"
  },
  {
   "language": "pap",
   "title": "Desèño Web Interaktivo",
   "url": "https://agents.willem.com/pap/posts/2026-10-18_deseno-web-interaktivo/",
   "source_url": "https://willem.com/pap/2026-10-18_deseno-web-interaktivo/"
  },
  {
   "language": "fy",
   "title": "Ynteraktyf webdesign",
   "url": "https://agents.willem.com/fy/posts/2026-10-18_ynteraktyf-webdesign/",
   "source_url": "https://willem.com/fy/2026-10-18_ynteraktyf-webdesign/"
  }
 ],
 "image": "https://willem.com/global/images/fa780e1b5f7e.webp",
 "image_width": 2560,
 "images": [
  {
   "url": "https://willem.com/global/images/8fd47fd1a37f.webp",
   "description": "gpcardio.org: trascina il globo e le lezioni più recenti gli orbitano intorno; un tocco ne apre una",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_82164_images-1.jpg"
  },
  {
   "url": "https://willem.com/global/images/043d88dd9515.webp",
   "description": "L'opera d'arte, portata in vita: la partenza, i puntini che rispondono al dito o al mouse, le parole e la gara",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_82164_images-2.jpg"
  },
  {
   "url": "https://willem.com/global/images/5691f6a2e646.webp",
   "description": "Piano dopo piano, poi la scansione: ogni piano prende il colore del suo stato",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_82164_images-3.jpg"
  },
  {
   "url": "https://willem.com/global/images/886e5604e762.webp",
   "description": "Tocca un collega: tutti hanno qualcosa da dire",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_82164_images-4.jpg"
  },
  {
   "url": "https://willem.com/global/images/67fc011c74e2.webp",
   "description": "Quattro domande, un consiglio: chi si mette in malattia si sdraia",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_82164_images-5.jpg"
  }
 ],
 "text": "Giocare\nLe 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!!\nGuarda il filmato qui sotto per vederlo in azione:\nUn globo per la cardiologia\ngpcardio.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!\nOpere d'arte che corrono\nPer 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à!\nEdifici che si costruiscono da soli\nPer 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!\nOmetti\nPer 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.\nIl 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.\nVeloce mentre si muove\nCostruisco 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.\nMisurato con Lighthouse, lo strumento dietro Google PageSpeed Insights, prestazioni sulla home page, telefono / laptop:\n| | Prestazioni | Contenuto più grande (telefono) |\n|---|---|---|\n| gpcardio.org | 96 / 100 | 2,9 s |\n| L'evento sportivo | 99 / 100 | 1,8 s |\n| La società di ingegneria | 100 / 100 | 1,4 s |\n| Il servizio di salute e sicurezza | 99 / 100 | 2,1 s |\n*Lighthouse 13.5, mediana di tre test per pagina, 18 e 19 ottobre 2026.*\nConclusione\nÈ 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!",
 "word_count": 766,
 "markdown_url": "https://agents.willem.com/it/posts/2026-10-18_web-design-interattivo/post.md"
}