{
 "id": 82164,
 "slug": "2026-10-18_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": "pt",
 "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": "Design web interativo",
 "subtitle": "Mas será divertido?!",
 "summary": "Um site não tem de ser um folheto por onde passas a rolar. Cada vez mais faço sites interativos, páginas com que podes brincar: um globo que fazes rodar, ilustrações que se afastam para dar passagem ao teu dedo, edifícios que se constroem sozinhos e bonequinhos que respondem. Neste artigo mostro quatro deles!",
 "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 (pt_PT)",
  "date": "2026-10-20",
  "reviewed_by_native_reader": false,
  "language": "pt",
  "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": "it",
   "title": "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": "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: arrasta o globo e as palestras mais recentes orbitam com ele; um toque abre uma",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_82164_images-1.jpg"
  },
  {
   "url": "https://willem.com/global/images/043d88dd9515.webp",
   "description": "A ilustração com vida: o início, os pontos a responder a um dedo ou ao rato, as palavras e a corrida",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_82164_images-2.jpg"
  },
  {
   "url": "https://willem.com/global/images/5691f6a2e646.webp",
   "description": "Piso a piso, depois o varrimento: cada piso fica com a cor do seu estado",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_82164_images-3.jpg"
  },
  {
   "url": "https://willem.com/global/images/886e5604e762.webp",
   "description": "Toca num colega: todos têm algo para dizer",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_82164_images-4.jpg"
  },
  {
   "url": "https://willem.com/global/images/67fc011c74e2.webp",
   "description": "Quatro perguntas, um conselho: quem dá baixa deita-se",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_82164_images-5.jpg"
  }
 ],
 "text": "Brincar\nAs pessoas lembram-se do que tocaram. Uma página que responde ao rato ou ao dedo convida a olhar à volta, a experimentar, a ficar um bocadinho mais. Isso era difícil: tecnologia 3D complexa, chips lentos nos telemóveis, uma bateria que se esgota... complicado! Mas graças a uma otimização extrema e a pipelines de IA automatizadas, consigo agora subir a fasquia muito mais alto! AGORA JÁ SE PODE, SE PODE MESMO!!\nVê o filme abaixo e fica a ver isto em ação:\nUm globo para a cardiologia\nO gpcardio.org é a Global Primary Care Cardio Network: palestras, atualizações de diretrizes e um panorama da literatura sobre cuidados cardíacos, renais e metabólicos, para médicos de família. A página inicial é um globo de pontos com as sociedades ligadas assinaladas nos seus países. As palestras e atualizações mais recentes orbitam-no como cartões. Arrasta o globo e o mundo roda, toca num cartão e a palestra abre, escolhe uma etiqueta e só ficam os vídeos. BUM, O MUNDO INTEIRO! Isto sim é dar forma a uma ambição verdadeiramente global!\nIlustrações que correm\nPara um evento desportivo dei vida às ilustrações do designer, com shaders 3D e WebGL. No início, as pistas explodem da oval, seguidas de confetes. Os pontos de meio-tom respondem ao teu dedo ou ao rato, as pistas disparam quando fazes scroll, as modalidades correm para uma meta com um vencedor diferente de cada vez, e um relógio gigante faz a contagem decrescente até ao dia de abertura. O desenho em tempo real coincide com a ilustração original em 99,3% dos píxeis, mas é _pelo menos_ 300% mais divertido graças à interatividade!\nEdifícios que se constroem sozinhos\nPara uma consultora de engenharia de edifícios e instalações, quatro torres caem piso a piso. Depois, uma linha de varrimento colore cada piso conforme o seu estado, e a imagem assenta em telhados verdes: o estado final sustentável. Mexe o rato e a cena roda contigo. Mais abaixo, todos os serviços correm ao longo do processo de construção numa única pista horizontal, e três anéis deslizam juntos enquanto fazes scroll. Dinâmica em ativos _fixos_? SEM PROBLEMA!\nBonequinhos\nPara um serviço de saúde ocupacional dei uma cara à pessoa do logótipo. Passa o rato por cima de um e ele espreita, toca-lhe e ele salta, dança ou desmaia e levanta-se outra vez, com algo para dizer. Chovem na página enquanto fazes scroll, e uma multidão inteira organiza-se em 20, 60 e 20 por cento: absentismo por causa médica, por circunstâncias pessoais e por causa na organização.\nO consultor de pacotes faz quatro perguntas. A cada resposta, os bonequinhos mudam: mais colegas, trabalhadores flexíveis, e quem dá baixa deita-se. O conselho mostra quanto custa cada pacote por ano, e podes levá-lo diretamente para a inscrição ou pedir uma chamada. Doença e absentismo não têm graça nenhuma, mas uma figurinha a tombar é ainda mais hilariante, e é _esse_ sorriso que dá a uma proposta de resto séria o seu impacto positivo.\nRápido enquanto se mexe\nConstruo isto sobre anos de experiência com tecnologia de jogos: do Snake '97 ao Protect Your Eggs, um jogo que fiz com o meu filho de sete anos, e dados de treino em 3D. As cenas 3D são desenhadas num worker ao lado da página, por isso a própria página fica livre para responder. Só desenham quando algo muda e descansam um segundo depois do último toque. Os bonequinhos são SVG e CSS simples. Por trás de cada cena 3D há uma imagem estática, para o primeiro desenho do ecrã, para telemóveis que não a conseguem desenhar e para visitantes que preferem menos movimento. Sem framework e sem scripts de terceiros: as três páginas de conceito pesam entre 0,15 e 0,46 MB.\nMedido com o Lighthouse, a ferramenta por trás do PageSpeed Insights da Google, desempenho na página inicial, telemóvel / portátil:\n| | Desempenho | Maior conteúdo (telemóvel) |\n|---|---|---|\n| gpcardio.org | 96 / 100 | 2,9 s |\n| O evento desportivo | 99 / 100 | 1,8 s |\n| A consultora de engenharia | 100 / 100 | 1,4 s |\n| O serviço de saúde e segurança | 99 / 100 | 2,1 s |\n*Lighthouse 13.5, mediana de três execuções por página, 18 e 19 de outubro de 2026.*\nConclusão\nTambém é divertido?! Era o que um professor sábio me perguntava sem parar na universidade. Aplico agora essa \"lição\" com muito prazer: o design web interativo é mais do que uma pequena decoração. Trata-se de otimismo e de um impacto duradouro que brinca com a curiosidade natural! Queres pensar também nas possibilidades criativas, numa página que as pessoas _queiram_ tocar? Escreve-me!",
 "word_count": 777,
 "markdown_url": "https://agents.willem.com/pt/posts/2026-10-18_design-web-interativo/post.md"
}