Unidad 7 · Semana 13 · Clase 4 de 5
Movimiento básico
Animar elementos de marca con criterios básicos de movimiento.
- Lectura 15 min
- Práctica 35 min
- Repaso 10 min
La marca también se mueve
En pantallas, el movimiento es parte de la comunicación: un logo que aparece en un video, un texto que entra en una historia, un botón que reacciona. Bien usado, da vida y guía la atención; mal usado, distrae y cansa.
Principios básicos
| Principio | Qué es | Ejemplo |
|---|---|---|
| Duración | Cuánto tarda una animación | Interfaces: 200 a 400 milisegundos. Entradas de títulos en video: medio segundo a un segundo |
| Aceleración | Las cosas reales no se mueven a velocidad constante: arrancan y frenan | Usar curvas de entrada y salida suaves, no movimiento lineal |
| Propósito | Cada movimiento comunica algo | Un elemento que entra desde la derecha sugiere "siguiente" |
| Jerarquía | Primero se mueve lo más importante | El título entra antes que el detalle |
| Coherencia | Los movimientos tienen un carácter de marca | Una marca cálida se mueve suave; una deportiva, rápida y con energía |
Qué animar en una identidad
- El isologo: una animación breve de 2 a 4 segundos para videos y presentaciones.
- Transiciones de historias y videos.
- Textos de las plantillas de redes.
- Microinteracciones en la web: botones, menús.
Formatos de salida
- Video MP4: redes y presentaciones.
- GIF: animaciones cortas sin sonido; pesa bastante.
- Lottie o animaciones de código: web y apps; livianas y nítidas.
Respetá a quien no quiere movimiento: en web, los sistemas operativos permiten pedir "reducir movimiento". Un buen sitio lo respeta.
Práctica · 35 min
- Hacé un guion de seis cuadros de la animación de tu isologo, de 3 segundos.
- Animalo en un programa a tu alcance: puede ser una herramienta en línea de plantillas animadas, After Effects, Figma con prototipos o una app del celular.
- Animá la entrada del texto en una de tus plantillas de historia.
- Revisá las duraciones: ¿algo se siente lento o brusco?
Repaso · 10 min
1. ¿Cuánto suele durar una animación de interfaz?
¡Bien! Más largas se sienten lentas al usar la interfaz.
Todavía no. Probá otra opción.
2. ¿Por qué se usan curvas de aceleración en lugar de movimiento lineal?
¡Bien! El movimiento lineal se ve mecánico.
Todavía no. Probá otra opción.
3. ¿Qué preferencia del usuario conviene respetar en web?
¡Bien! Hay personas a quienes el movimiento les causa malestar.
Todavía no. Probá otra opción.
Preguntale al asistente
Conoce esta clase y toda la diplomatura. Responde a cualquier hora.
El asistente puede equivocarse. Ante una duda importante, contrastá con la lectura.