Banners animados: movimiento al servicio del mensaje

Los buenos banners animados usan el movimiento para atraer la mirada una vez y después se apartan del mensaje. La estructura fiable son tres fotogramas: un gancho, el valor y un fotograma final con la marca y una llamada a la acción clara que se queda en pantalla. Mantén corta toda la secuencia, haz que ese último fotograma funcione por sí solo como anuncio estático y mantén ligero el archivo, porque las redes publicitarias limitan tanto la duración de la animación como el peso del archivo.

El storyboard de tres fotogramas

Los banners se ven de pasada, junto a algo que el lector sí ha venido a ver. Nadie espera a que un banner termine. Planifica la secuencia para que cada fotograma tenga sentido por sí solo y el orden cuente una historia diminuta.

1. 1

   Fotograma 1: el gancho

   Una línea corta o una imagen llamativa. Su único trabajo es hacer que alguien mire. “Tu escritorio, más en calma.” De dos a tres segundos.

2. 2

   Fotograma 2: el valor

   Lo que ofreces, en los términos del lector. “Bandejas para cables que encajan en cualquier mesa.” De dos a tres segundos.

3. 3

   Fotograma 3: el cierre

   Logotipo, la oferta en breve y una llamada a la acción con forma de botón. “Descubre la colección.” Este fotograma se mantiene hasta que el anuncio se detiene.

El mismo storyboard sirve para los anuncios en redes, que suelen ser vídeos cortos más que banners. Diseño de anuncios para Facebook y diseño de anuncios para Instagram tratan esos formatos.

Ritmo y bucles en los banners animados

Muchas redes publicitarias y medios limitan cuánto tiempo puede durar la animación y cuántas veces puede repetirse, y los límites varían. Google Ads, por ejemplo, limita los anuncios animados subidos a 30 segundos de animación. Consulta la especificación vigente de cada red en la que compres espacio, y diseña para que el anuncio termine en su fotograma más fuerte sea cual sea el límite.

Tamaños estándar de banner

Las redes de display usan un conjunto de tamaños estándar. Una campaña suele cubrir varios, así que diseña un sistema y no un único anuncio: una composición que se reorganiza para huecos anchos, altos y pequeños manteniendo las mismas palabras, el mismo color y el mismo movimiento.

GIF o HTML5 para banners animados

La mayoría de las redes de display aceptan anuncios animados en GIF o en HTML5, un pequeño paquete de HTML, CSS, JavaScript e imágenes. HTML5 da un movimiento más fluido, texto nítido en cualquier densidad y color completo, y encaja con anuncios más ricos. El GIF es más sencillo de producir y se acepta casi en todas partes, pero su límite de 256 colores hace que los degradados muestren bandas. Los límites de peso de ambos son estrictos, medidos en kilobytes y no en megabytes, así que revisa la especificación de cada red.

Si optas por GIF, las técnicas de GIF animados reducen el peso: menos fotogramas, una paleta construida a partir de la animación y la menor parte posible del encuadre en movimiento. Para el movimiento en sí, unas curvas de aceleración coherentes son lo que separa un banner pulido de uno que da tirones.

Reglas de diseño que hacen funcionar un banner

Un fondo característico es la forma más barata de ser reconocido a lo largo de una campaña. Cuando el mismo campo de color se mueve detrás de cada fotograma y de cada tamaño, la gente empieza a asociar el movimiento contigo antes de leer una palabra. Prueba variaciones del gancho en lugar del anuncio entero; pruebas de creatividades publicitarias explica cómo hacerlo de forma justa.

Gradiently encaja con la parte social de una campaña. Diseña el gancho y el cierre sobre un Mark que te pertenece, adapta el tamaño a 1080×1080, 1080×1350 y 1080×1920 en un solo paso con Pro, y exporta cada uno en MP4. El Mark se renderiza para cada formato, así que su zona tranquila sigue detrás de las palabras en todos los tamaños.