Diseño web interactivo

Resumen

Una web no tiene por qué ser un folleto por el que pasas de largo con el dedo. Cada vez hago más webs interactivas, páginas con las que se puede jugar: un globo terráqueo que giras, una obra gráfica que se aparta cuando la tocas, edificios que se construyen solos y personajillos que te contestan. ¡En este artículo te enseño cuatro!

Texto completo

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!

[action1]

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:

| | Rendimiento | Mayor contenido (móvil) | |---|---|---| | gpcardio.org | 96 / 100 | 2,9 s | | El evento deportivo | 99 / 100 | 1,8 s | | La consultora de ingeniería | 100 / 100 | 1,4 s | | El servicio de salud y seguridad laboral | 99 / 100 | 2,1 s |

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!