Design web interativo

Resumo

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!

Texto completo

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 é 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!

[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!

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!

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.

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.

Rápido enquanto se mexe

Construo 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.

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 | 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. 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!