Diseño web interactivo

Jugar

La gente recuerda lo que ha tocado. Una página que responde al ratón o al dedo te invita a mirar alrededor, a probar algo, a quedarte un poco más. Antes eso era difícil: tecnología 3D compleja, chips lentos en los móviles, una batería que se vacía... ¡complicado! Pero gracias a una optimización extrema y a procesos automatizados con IA ahora puedo poner el listón mucho más alto. ¡¡AHORA SE PUEDE, DE VERDAD QUE SE PUEDE!!

Mira el vídeo de abajo para verlo en acción:

Un globo para la cardiología

gpcardio.org es el Global Primary Care Cardio Network: ponencias, actualizaciones de guías y un repaso de la literatura sobre atención cardíaca, renal y metabólica, para médicos de familia. La página de inicio es un globo de puntos con las sociedades conectadas marcadas en sus países. Las ponencias y actualizaciones más recientes giran a su alrededor como tarjetas. Arrastra el globo y el mundo gira, toca una tarjeta y se abre la ponencia, elige una etiqueta y solo quedan los vídeos. ¡PUM, EL MUNDO ENTERO! ¡Eso sí que es dar forma a una ambición verdaderamente global!

VISITA GPCARDIO.ORG

Una obra gráfica que corre

Para un evento deportivo di vida a la obra gráfica de la diseñadora con shaders 3D y WebGL. Al empezar, los carriles brotan del óvalo, seguidos de confeti. Los puntos de trama responden a tu dedo o al ratón, los carriles se lanzan cuando haces scroll, los deportes corren hacia una meta con un ganador distinto cada vez, y un reloj gigante cuenta atrás hasta el día de la inauguración. El dibujo en vivo coincide con la obra original en el 99,3 % de sus píxeles, pero es como mínimo un 300 % más divertido gracias a la interactividad.

Edificios que se construyen solos

Para una consultora de ingeniería de edificios e instalaciones, cuatro torres caen planta a planta. Una línea de escaneo colorea después cada planta según su estado, y la imagen termina en cubiertas verdes: el estado final sostenible. Mueve el ratón y la escena gira contigo. Más abajo, todos los servicios recorren el proceso de construcción en una sola pista horizontal, y tres anillos se deslizan juntos al hacer scroll. ¿Dinamismo en activos fijos? ¡NINGÚN PROBLEMA!

Personajillos

Para un servicio de salud laboral le puse cara a la figura de su logotipo. Pasa el ratón por encima de una y se asoma, tócala y salta, baila o se desmaya y se levanta, con algo que decir. Llueven sobre la página mientras haces scroll, y toda una multitud se reparte en un 20, un 60 y un 20 por ciento: absentismo por causa médica, por circunstancias personales y por causas de la organización.

El asesor de paquetes hace cuatro preguntas. Con cada respuesta los personajillos cambian: más compañeros, trabajadores temporales, y quien se pone de baja se tumba. El consejo muestra lo que cuesta cada paquete al año, y puedes llevártelo directamente a la inscripción o pedir que te llamen. La enfermedad y el absentismo no tienen gracia, pero un personajillo que se cae es muchísimo más gracioso, y esa misma sonrisa le da un impacto positivo a una propuesta que, por lo demás, es seria.

Rápido mientras se mueve

Lo construyo sobre años de experiencia con tecnología de videojuegos: desde Snake '97 hasta Protect Your Eggs, un juego que hice con mi hijo de siete años, y datos de entrenamiento en 3D. Las escenas 3D se dibujan en un worker aparte de la página, así que la página queda libre para responder. Solo dibujan cuando algo cambia y descansan un segundo después del último toque. Los personajillos son SVG y CSS puros. Detrás de cada escena 3D hay una imagen fija, para el primer pintado, para móviles que no pueden dibujarla y para visitantes que prefieren menos movimiento. Sin framework y sin scripts de terceros: las tres páginas de concepto pesan entre 0,15 y 0,46 MB.

Medido con Lighthouse, la herramienta que hay detrás de Google PageSpeed Insights, rendimiento en la página de inicio, móvil / portátil:

Lighthouse 13.5, mediana de tres ejecuciones por página, 18 y 19 de octubre de 2026.

Conclusión

¿Y además es divertido? Eso me preguntaba una y otra vez un sabio profesor en la universidad. Ahora aplico esa «lección» con muchísimo gusto: el diseño web interactivo es más que un poco de decoración. Va de optimismo y de un impacto duradero que juega con la curiosidad natural. ¿Te apetece pensar también en las posibilidades creativas, en una página que la gente quiera tocar? ¡Escríbeme un mensaje cuando quieras!