Catálogo digital: Animar productos destacados

Cómo podemos capturar la atención de un visitante a nuestro catálogo utilizando animaciones simples y fáciles de hacer.

Un catálogo de ofertas periódicas está colmado de productos, con precios rebajados y descuentos especiales. Todos ellos luchando entre sí para captar la efímera atención de quién recorre las páginas en su celular. No es tarea sencilla.

Un potencial comprador visita brevemente un catálogo y recibe -además- decenas de otros estímulos externos que convierten su interés en algo fugaz, que se desvanece en cuestión de segundos. No tenemos más que 1 ó 2 segundos para despertar el interés y debemos pensar en nuevas posibilidades para hacerlo.

Un catálogo online no puede -ni debe tener- el mismo diseño, ni las mismas medidas o extensión que su predecesor, el catálogo impreso. Hoy disponemos de nuevos recursos para mejorar el resultado de un catálogo y lograr páginas de alto impacto visual que capturen esa atención esquiva.

Productos destacados

Una de las herramientas más comunes para hacer más visible un producto es destacarlo en la página a través del tamaño, la tipografía, los colores y diversos recursos gráficos que rompan la monotonía del diseño tradicional de un catálogo.

La animación de algunos productos es otro recurso que puede ser de gran utilidad. Dentro de una página o un catálogo estático, un producto en movimiento llama la atención frente al resto.

El primer paso es determinar cuál o cuáles son los productos a destacar. Deben ser muy pocos. Es fundamental no abusar de este recurso en nombre del buen gusto pero pensando también que si todo se destaca, nada lo hace.

Cómo hacer una animación fácil en Photoshop

Los primeros pasos en la animación los podemos realizar en una herramienta generalista como lo es Photoshop. Para los casos más avanzados y logrados podemos recurrir a animadores 2D y a herramientas como After Effects o similares, diseñadas especialmente para esa tarea. Vayamos de a poco.

Podemos comenzar con algo muy sencillo. Un producto que "parpadea" en la página, llama la atención. Hay movimiento. Este efecto es muy fácil de lograr y solo necesitamos de una imagen de producto. Más adelante, podemos incluir varias fotos de un mismo producto que vayan cambiando.

Manos a la obra

La tarea en Photoshop requiere de dos pasos: crear una capa en blanco y asignar la duración en la línea de tiempo (Timeline).

Crear una nueva capa en blanco (Layer)

Activamos el panel Layers en Window > Layers y presionamos el botón [+] para crear una nueva capa. De este modo tendremos la capa existente (Layer 1 / Capa 1) con la foto del producto y la capa nueva (Layer 2 / Capa 2) en blanco (transparente).

La línea de tiempo (Timeline)

La foto de producto es una imagen estática que debemos animar en la línea de tiempo. Seleccionamos Window > Timelime para desplegar el panel de animación. Allí presionamos en Create VideoTimeline.

La duración sugerida total es de 3 segundos, 2 segundos para el producto y 1 segundo para la capa transparente (que dará la ilusión del producto que aparece y desaparece). El próximo paso es exportar el archivo a formato GIF o PNG animados.

Incluir la animación en el catálogo

La mayoría de las plataformas de publicación de catálogos digitales disponen de opciones para enriquecer el contenido del folleto. Allí podemos incluir links, videos o imágenes superpuestas al PDF original. En este caso incluimos una imagen encima de la página para colocar la animación y finalmente publicar el catálogo.

En el ejemplo destacamos un producto en tapa que llamada la atención frente al resto y aporta movimiento al catálogo.

¿Ya estás usando recursos para atraer la atención del consumidor? ¿Tus catálogos incluyen videos, links o animaciones? Contame. Te leo en los comentarios ¿Querés saber más?