35
SITIOS WEB
Intermedio
Alumnos
Sacarle la rigidez al sitio con movimiento medido
Agregá animaciones y microinteracciones que hagan el sitio más vivo, sin caer en el exceso que marea.
Qué problema resuelve
Un sitio completamente quieto se siente viejo, pero uno donde todo se mueve marea y tapa el contenido. El punto justo es movimiento que ayuda a entender: que muestra jerarquía, que confirma que algo se tocó.
Cómo funciona
- Describí tu sitio y con qué está hecho
- Pedí propuestas ordenadas por impacto y por dificultad
- Empezá por dos o tres, no por diez
- Verificá que nada tape ni retrase el contenido
- Probalo en el celular y con conexión lenta
Prompt recomendado
Copiá y pegá en tu herramienta de IA
Mi sitio se ve muy estático y quiero darle vida sin exagerar. Con qué está hecho: [CONSTRUCTOR DE SITIOS / HTML Y CSS / GENERADO CON IA] Secciones que tiene: [LISTAR] Mi nivel técnico: [BAJO / MEDIO] Sensación que busco: [SOBRIA / DINÁMICA / JUGUETONA] Proponeme movimiento con criterio: 1. Microinteracciones básicas: qué debería reaccionar cuando el mouse pasa por encima, y cómo 2. Apariciones al bajar: qué elementos conviene que aparezcan y cuáles no 3. Transiciones entre secciones 4. Un elemento con movimiento propio que dé personalidad, sin distraer 5. Para cada propuesta: qué tan difícil es con lo que uso, y cuánto mejora la sensación Reglas que quiero respetar: - Nada que retrase la lectura del contenido - Nada que se mueva solo en bucle y llame la atención permanentemente - Que todo el movimiento dure menos de medio segundo - Que el sitio se entienda igual si las animaciones no cargan - Que se pueda desactivar para quien prefiere menos movimiento Ordenalas por relación entre mejora y esfuerzo, y decime por cuáles tres empezar.
Ajustá el prompt a tu contexto: cuanto más específico seas, mejor será el resultado.
Ejemplo práctico
Con solo dos cambios —que las tarjetas se levanten al pasar el mouse y que las secciones aparezcan suavemente al bajar— el sitio dejó de sentirse como un documento impreso.
Consejos
- Empezá por tres efectos, no por diez: el exceso se nota más que la falta
- Menos de medio segundo: si dura más, molesta
- Nada que se mueva en bucle permanente, salvo que sea el centro del proyecto