Este artículo fue escrito el 6 de noviembre de 2026.
Las herramientas de IA evolucionan rápido. La cantidad de movimiento que una página web puede tolerar, no. Un cambio al pasar el cursor (hover), una transición breve (transition) y una pequeña respuesta al pulsar son más que suficientes. Efectos como el cristal translúcido (glassmorphism), el desplazamiento a distinta velocidad (parallax), las animaciones escalonadas (stagger), los carruseles (carousel) y el ajuste rígido de pantalla (scroll snap) se deben saber identificar para poder rechazarlos. Tome este texto como un límite y no como un manual de animación.
Los modelos de IA tienden a recargar las páginas con animaciones porque el movimiento transmite la falsa sensación de un trabajo más elaborado. Una página estática puede parecer incompleta en una demostración rápida de vídeo, pero resulta impecable en una sala de espera. Las personas a las que se dirige esta serie se encuentran más cerca de esa sala de espera: un teléfono móvil, una calle con mucha luz solar, un idioma que tal vez no sea la lengua materna del modelo y ninguna gana de perder el tiempo con elementos que se mueven mientras intentan leer una tarifa. El movimiento se justifica cuando explica una transición o un cambio de estado; jamás está justificado para demostrar que alguien conoce el nombre de un efecto visual.
Tres efectos que sí justifican su presencia
El cambio al pasar el cursor (hover) es la variación visual que se produce cuando el puntero del ratón se sitúa sobre un elemento interactivo: un matiz suave en el color o un subrayado en un enlace (link). Sirve para confirmar a quien usa ratón que ese elemento se puede pulsar. Sin embargo, no existe en pantallas táctiles: todo lo que solo se descubre al pasar el cursor resulta invisible en un teléfono. Por eso, especifique en su orden que esa misma señal debe mostrarse también al recibir el foco (focus) de navegación del teclado, o de lo contrario prescinda de ella.
Una transición (transition) es el breve lapso que toma un cambio de estado, por lo general en torno a un quinto de segundo (0,2 segundos). Un panel lateral (drawer) que aparece de golpe en un solo fotograma da la sensación de estar roto; uno que tarda un segundo entero en desplegarse resulta desesperantemente lento. Pida una transición corta tanto para abrir como para cerrar. No pida transiciones letra por letra al mostrar un texto: leer no es un espectáculo.
Una microinteracción (microinteraction) es una respuesta pequeña a una acción pequeña: el botón de guardar que muestra brevemente una marca de verificación o un filtro seleccionado que cambia sutilmente de estado. Es la misma honestidad que ofrece una notificación flotante (toast), pero en un formato más reducido. No consiste en una mascota animada, ni en una lluvia de confeti ni en efectos de sonido. Si no puede describir esa respuesta en una sola frase corta, significa que ya es demasiado compleja.
Términos que solo necesita aprender a rechazar
Estas palabras representan efectos reales en el diseño web, pero no son etapas necesarias por las que deba pasar su primera página. Cuando un modelo de IA se las proponga, podrá rechazarlas llamándolas por su nombre técnico:
- Glassmorphism — Paneles con efecto de vidrio esmerilado translúcido. Reducen considerablemente el contraste del texto superpuesto. Si las palabras resultan difíciles de leer, elimine el efecto de cristal.
- Parallax — Fondos que se desplazan a una velocidad diferente a la del texto principal. Puede provocar mareos en algunas personas y entra en conflicto con la configuración de movimiento reducido del sistema operativo.
- Bento — Cuadrículas con cajas de tamaños desproporcionados, llamadas así por las bandejas de comida japonesa. Resultan útiles más adelante para paneles de control (dashboards), pero en una primera página confunden la jerarquía de la información al usar el tamaño como único argumento.
- Stagger — Elementos que van apareciendo en pantalla uno tras otro con un retardo continuo. Obliga al usuario a esperar para leer una lista que podría haber visto de inmediato.
- Carousel — Bloques o tarjetas que se desplazan horizontalmente. La gran mayoría de usuarios jamás pasa de la primera diapositiva; es mucho más efectivo mostrar la información directamente integrada en la página.
- Scroll snap — Desplazamiento que encaja la página a la fuerza en la siguiente pantalla completa. En los teléfonos móviles suele atrapar al usuario entre secciones que solo pretendía ojear rápidamente.
No necesita dedicar tiempo a ensayar estos efectos; basta con rechazarlos con firmeza cuando aparezcan sin haber sido solicitados: “No glass, no parallax, no carousel, no scroll snap. Short transitions only.” Esa simple instrucción en inglés constituye un filtro de diseño impecable.
Una tarifa leída en la calle
Imagine a alguien en la calle, frente a la fachada de un local, sosteniendo el móvil bajo la luz directa del sol e intentando consultar el precio de una clase antes de entrar. La página que le proporcionaron hace que el precio aparezca deslizándose tras un segundo de pausa, superpuesto sobre una fotografía de la calle y con un fondo que se mueve a una velocidad distinta a la del texto. En la pantalla del ordenador de la oficina parecía un diseño sofisticado; bajo el sol, parece una página inestable que no transmite confianza. La persona opta por entrar y preguntar directamente: la pantalla falló en la única tarea útil que tenía encomendada.
Esto sucede a diario en lugares donde el teléfono es la única pantalla disponible y la calle hace las veces de oficina. Un efecto visual que requiere una habitación en penumbra y un monitor de gran tamaño no es un estándar neutro, sino un capricho copiado de un estudio de diseño. Nombrar el efecto en inglés es la forma exacta de rechazar esa copia. No hace falta criticar el estilo; basta con especificar qué sustantivo técnico no desea en el inglés que el modelo comprende, evitando que vuelva a colarse bajo excusas como “hacerlo más atractivo”.
La instrucción que evita estos problemas es concisa y utiliza los nombres técnicos adecuados: sin carrusel para mostrar el precio, sin efecto cristal detrás de los números, sin paralaje y sin apariciones escalonadas en la lista de clases. Una transición breve al desplegar un panel lateral (drawer) y ninguna animación si el usuario ha activado en su teléfono la preferencia de movimiento reducido (reduced motion). Texto oscuro sobre una superficie plana y clara. El precio debe ser el primer dato visible de la sección, no la segunda diapositiva de un pase de fotos. Puede redactar esa regla una sola vez y reutilizarla en cada proyecto este año; mantendrá su validez mucho más tiempo que las modas pasajeras que tientan a los modelos.
La configuración que prevalece sobre cualquier efecto
Los sistemas operativos permiten que cualquier persona active la opción de movimiento reducido (reduced motion). Una página web que ignora esa preferencia no es dinámica; está desatendiendo una necesidad declarada del usuario. Incluya esta indicación en su instrucción técnica: si el usuario prefiere movimiento reducido, muestre el estado final del elemento de inmediato, sin desplazamientos ni animaciones escalonadas. La información permanece intacta; la animación se omite.
El contraste adecuado sobrevive a todas las tendencias visuales. El texto sobre fotografías, sobre cristal esmerilado o en tonos grises pálidos que parecían elegantes en el lienzo del diseñador fracasa bajo la luz del sol, en pantallas económicas y para ojos cansados. Solicite texto oscuro sobre superficies claras y planas a menos que tenga una razón de peso para no hacerlo. El nombre técnico de la superficie es secundario; que el texto sea perfectamente legible no lo es.
El recorrido a lo largo de esta serie nunca consistió en memorizar cuarenta definiciones técnicas, sino en aplicar cuatro decisiones clave: nombre el componente en inglés para que la IA no tenga que adivinarlo; redacte el contenido y las etiquetas en el idioma de sus usuarios; defina si el momento exige detener, compartir o simplemente informar; y mantenga la página lo bastante estable para que se pueda leer sin distracciones. Quien domina esas cuatro decisiones ha superado el vocabulario esencial que determina la calidad del trabajo. El resto es solo un catálogo secundario que podrá consultar más adelante, por su nombre en inglés, cuando una pantalla realmente lo requiera.