¿En qué contextos usar tu Marca Animada?

La Marca Animada va más allá de su uso en la presentación

Ya hace tiempo que tanto motion graphics como la animación, en general, se vienen usando en el campo del branding para generar una marca animada. Software específico optimizado para ello, como After Effects de Adobe, ha permitido dar vida y movimiento a la marca, generando una nueva dimensión en su comunicación.

Pero como suele suceder en todos los inicios, tendemos a no saber cómo utilizar estas herramientas, o cómo contextualizar sus resultados. En este post hablaremos, sin profundizar demasiado, de los siguientes aspectos:

Contenido:

  1. El briefing como punto de partida.
  2. Animaciones en Redes Sociales.
  3. Presentaciones de marca.
  4. Introduciones, cortinillas y ráfagas para audiovisuales.
  5. Stickers animados en Apps de mensajería.
  6. Animaciones en entorno web y app
  7. Conclusiones

1. El Briefing como punto de partida

Como siempre, claro. Pero en este caso, debemos partir de dónde queremos llegar, para plantear una animación que realmente sea una solución adecuada, y maximizar así sus resultados.

Si comenzamos con la conceptualización de una nueva marca, o una identidad para una nueva compañía, puede ser un punto a favor para su diferenciación introducir en el briefing los objetivos que se pretenden cubrir con la animación en cuestión.

Este caso es reseñable pues no será comparable al de una marca que ya disponga de su identidad visual y desee incorporar animaciones a su imagen, pues la gráfica existente va a condicionar la forma en la que se plantee el motion de la marca.

Así pues, para empezar, lo más inteligente será saber para qué queremos nuestra animación, y así adecuarnos a formatos, duraciones y, en definitiva, adaptarnos al entorno en el que va a interactuar.

2. Animaciones en Redes Sociales

Desde hace ya un tiempo, Facebook permite usar vídeos tanto para avatares de perfiles como de página, así como permite incluir vídeos también en las portadas de las páginas.

Este podría ser una buen entorno, si encaja dentro de la estrategia de comunicación de cada empresa, para incluir animaciones de la marca.

Va a depender de muchos factores el tipo de animación que se adecue a cada compañía, pero tener esto en cuenta desde el inicio, permitirá dirigir el concepto de base en una dirección u otra.

Por otra parte, a nivel técnico, el formato de la marca animada que nos permite facebook es de vídeo, por lo que en este caso un .gif (formato de imagen, no de vídeo) no nos serviría.

Cabría conocer además una importante limitación como es la duración, que en este caso Facebook nos permite hasta siete segundos de animación. Lógicamente, siendo una animación para un avatar es más que suficiente, pero se debe tener en cuenta desde el principio para que todo funcione conforme a lo programado.

3. Presentaciones de marca

Es probablemente el uso más conocido de la marca animada en el campo del branding, por su impacto visual al tratarse de la presentación de algo nuevo.

Las grandes marcas también lo usan en casos de rebranding, y se trata de animaciones que, si bien no tienen unas limitaciones concretas, (más allá de las impuestas por la propia empresa) tienden a ser una explicación o justificación de cómo se ha construido la identidad visual, y cómo ésta se adapta a los valores de la marca en cuestión.

Los medios digitales en los que se suelen difundir son dentro de las propias páginas web corporativas, o landing pages creadas ex profeso, o en las plataformas de video más conocidas como YouTube o Vimeo.

Como siempre, hablamos de imágenes corporativas, pero no necesariamente de la marca principal de una empresa. También puede usarse para nuevas sub-marcas, o imágenes de un nuevo producto concreto, para su promoción.

Una de las últimas presentaciones de rebranding que me ha encantado, es ésta de Fisher-Price, a cargo de la prestigiosa agencia Pentagram. En poco tiempo, y gracias a la música y a la narrativa empleada, nos acerca a la conceptualización de la nueva imagen.

4. Introducciones, cortinillas y ráfagas para audiovisuales

Este es seguramente el medio en el que más complejo será el proceso y el diseño de la animación. En muchos casos, las marcas pueden producir audiovisuales, ya sea para la promoción de productos, como para la difusión de conocimientos, a base de videotutoriales, reviews, etc.

Este entorno, que principamente se difundirá en YouTube o Vimeo, requerirá de una animática distinta a la de la presentación de un logo, pues se trata de una composición para introducir un video (cabecera) o para separar contenidos (cortinilla).

En todo caso, la animación deberá ser coherente igualmente con la imagen de marca y con el carácter que se le ha pretendido dar.

En cuanto a su duración, no debería extenderse demasiado, por su propio propósito de introducir un contenido, es decir, la animación en este caso no es el contenido en sí mismo. Igual sucede con las cortinillas par cambio de temas o de sección. Ésta, de hecho, debería ser más corta que la portada principal, para que el conjunto sea coherente.

5. Stickers animados en apps de mensajería

Concretamente, en Telegram. Los que conozcáis esta famosa plataforma de mensajería, de código abierto, sabréis que suele ir por delante en cuanto a innovación y prestaciones, frente al gigante de Zuckerberg, el Whatsapp Messenger.

Telegram permite el uso de emojis animados, que no hay que confundir con los gifs, que sí podemos enviar con toda aplicación de mensajería. La diferencia a nivel funcional, es que el sticker es una ilustración integrada en la interfaz de la aplicación, mientras que el .gif es una imagen que el usuario descarga para visualizar. Otra de las diferencias más evidentes es que el sticker puede aparecer contorneado, mientras que el gif suele tener un fondo cuadrado.

La ventaja de Telegram, por su condición de aplicación de código abierto, es que se pueden incluir tus propios emojis animados. Este es un medio de difusión para pequeñas animaciones, que no necesariamente puede ser válido para todo tipo de empresas. Como en todos los casos, habrá marcas con otras estrategias de imagen, que no consideran estos medios como una vía coherente de difusión de su identidad visual.

A nivel técnico, este caso es probablemente el más complejo. Por un lado, podemos crear las animaciones igualmente con After Effects, pero para ser usado en el entorno de Telegram, es necesario convertirlo a un archivo .TGS. Para ello, precisaremos de Bodymovin, una extensión de After Effects. En esta página están todos los detalles para crear las animaciones correctamente.

El propio entorno e idiosincrasia del sticker, hace que su uso sea para marcas más desenfadadas y con un todo informal. Compañías que tengan una mascota en su imagen, podrían usar este canal para difundir su marca animada.

6. Animaciones en entornos web y app

Para finalizar, no podemos olvidarnos del uso más evidente. Todas las compañías que decidan tener su marca animada, deberían implementarla en su web o si disponen de ella, en su app.

Cuando introducimos una animación en una web lo podemos hacer de múltiples maneras, pero debemos saber si queremos primar la calidad de la imagen, frente a otros criterios como la carga de la página.

Actualmente PageSpeed Insights penaliza el uso de .gif, y propone el uso de videos incrustados. De optar por esta modalidad, dependiendo de la naturaleza de la animación, podríamos querer que se reproduzca automáticamente, por lo que la opción de incrustar un video desde plataformar como YouTube o Vimeo puede no sernos útil en un principio, y podría ser más sencillo configurarlo desde el HTML de la web.

La etiqueta video nos permite asignar atributos como loop, o autoplay, para permitir la reproducción en bucle o la reproducción automática, respectivamente. Como siempre, vamos a depender del tipo de navegador y su versión, para saber cómo funcionará exactamente, cosa que con la inserción de videos desde plataformas como las mencionadas, tendremos algo más de control sobre la visualización final, además que siempre podrán ir a la página del video en concreto, y visualizarlo desde You Tube o Vimeo.

Además, si deseamos añadir interactividad ya estaríamos hablando del uso de javascript y demás herramientas que van complicando el trabajo, aunque dotan el resultado de mayor sofisticación.

Todo esto se podría desarrollar mucho más, pues para insertar videos desde YouTube tenemos varias opciones predeterminadas que modifican el snipet que copiaremos en nuestro HTML, para autorreproducir, o iniciar el visionado en un minuto concreto del video, pero esto sería materia de otro post.

7. Conclusiones

Como hemos visto, se podría profundizar mucho más en cada uno de los apartados, tanto a nivel conceptual, como a nivel técnico. Si tenéis alguna propuesta para desarrollar en otros posts no tenéis más que dejarlo en los comentarios, y trataré de ampliar información en la medida de lo posible.

Podemos concluir que la importancia de conocer el entorno de difusión es vital, pues condicionará la forma en la que creamos la marca animada, así como su duración, tipo de archivo final, proporciones y un largo etc.

No va a ser igual una entrada para un video-tutorial, que la animación que creemos para un sticker, por poner un ejemplo extremo de las grandes diferencias que puede supone el propósito de nuestra animación.

¿Ya tienes claro cuál es el propósito de tu marca animada?

Referencias y enlaces de interés

  • El sticker animado del punto 5 pertenece a los paquetes de stickers de Telegram.
  • La web animada del punto 6 está extraída de la página awwwards, y en concreto es un proyecto del estudio Locomotive.
  • Podéis encontrar más detalles del proyecto de Pentagram para Fisher-Price en este enlace.

¿Compartes?

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *