--- title: "Design web interativo" date: 2026-10-18 language: pt topics: ["web", "webdesign", "work"] source_url: https://willem.com/pt/2026-10-18_design-web-interativo/ --- # Design web interativo *Mas será divertido?!* > 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! ## Brincar As 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!! Vê o filme abaixo e fica a ver isto em ação: ## Um globo para a cardiologia O [gpcardio.org](https://gpcardio.org/en/) é 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! ![gpcardio.org: arrasta o globo e as palestras mais recentes orbitam com ele; um toque abre uma](https://willem.com/global/images/8fd47fd1a37f.webp) [action1] ## Ilustrações que correm Para 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! ![A ilustração com vida: o início, os pontos a responder a um dedo ou ao rato, as palavras e a corrida](https://willem.com/global/images/043d88dd9515.webp) ## Edifícios que se constroem sozinhos Para 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! ![Piso a piso, depois o varrimento: cada piso fica com a cor do seu estado](https://willem.com/global/images/5691f6a2e646.webp) ## Bonequinhos Para 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. ![Toca num colega: todos têm algo para dizer](https://willem.com/global/images/886e5604e762.webp) O 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. ![Quatro perguntas, um conselho: quem dá baixa deita-se](https://willem.com/global/images/67fc011c74e2.webp) ## Rápido enquanto se mexe Construo isto sobre anos de experiência com tecnologia de jogos: do [Snake '97](https://willem.com/en/2026-02-25_three-games-in-three-weeks/) ao [Protect Your Eggs](https://willem.com/en/2026-09-13_protect-your-eggs/), um jogo que fiz com o meu filho de sete anos, e [dados de treino em 3D](https://willem.com/en/2025-03-10_workout-data-in-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. Medido com o Lighthouse, a ferramenta por trás do PageSpeed Insights da Google, desempenho na página inicial, telemóvel / portátil: | | Desempenho | Maior conteúdo (telemóvel) | |---|---|---| | [gpcardio.org](https://gpcardio.org/en/) | 96 / 100 | 2,9 s | | O evento desportivo | 99 / 100 | 1,8 s | | A consultora de engenharia | 100 / 100 | 1,4 s | | O serviço de saúde e segurança | 99 / 100 | 2,1 s | *Lighthouse 13.5, mediana de três execuções por página, 18 e 19 de outubro de 2026.* ## Conclusão Também é divertido?! Era o que um professor sábio me perguntava sem parar na [universidade](https://willem.com/en/about/). 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](https://willem.com/en/#contact)!