El sitio de un estudio 3D, de motion design o de efectos visuales: la demostración primero

Un estudio de motion design, de imagen de síntesis o de efectos visuales vende algo que se mueve. El productor, la agencia o la marca que llega a su sitio quiere verlo moverse enseguida, y en buena calidad. Busca también pistas más prosaicas: ¿puede este estudio entregar a tiempo, en los formatos correctos, por un presupuesto cercano al mío?

El sitio es, pues, la primera demostración del saber hacer del estudio. Si tarda diez segundos en mostrar una imagen, es la técnica del estudio la que queda bajo sospecha.

Lo que el cliente viene a buscar

1. El showreel, corto, con los mejores planos primero.
2. Proyectos del mismo tipo que el suyo: publicidad, videoclip, arquitectura, producto, videojuego, habillage de cadena.
3. Lo que hiciste en cada proyecto: modelado, animación, iluminación, composición, o todo de principio a fin.
4. Tu cadena de producción: las etapas, los plazos, los formatos entregados.
5. Los clientes y los equipos con los que has trabajado.
6. Un contacto que responde rápido, y cómo preparas un presupuesto.

La maquetación «Estudio 3D»

Es la maquetación que el estudio ofrece al motion design, a la imagen de síntesis y a los efectos visuales, donde la demostración es el producto. Aquí está de arriba abajo:

• La navegación mínima se reduce al nombre del estudio y a un botón de menú: nada se pone delante de la imagen.
• La portada abajo a la izquierda coloca el nombre y una frase en la esquina inferior, la variante pensada para los fondos de vídeo. Su botón lleva al showreel completo, dondequiera que esté alojado.
• El manifiesto mantiene una frase en pantalla y la ilumina palabra a palabra al desplazarse: lo que tu estudio hace mejor que otros. Solo hay uno por página.
• La galería en mosaico dispone una celda grande y otras pequeñas, para cinco o nueve imágenes: con cualquier otro número, la última fila queda huérfana. Pon ahí el plano más fuerte de cada proyecto.
• La banda hace desfilar una tira de palabras: tus disciplinas, tus herramientas, o los nombres de tus clientes si lo permiten. No pongas nada esencial: un texto que desfila se lee mal.
• Las cifras alinean algunas pruebas que puedes justificar: años de actividad, proyectos entregados, países de los clientes.
• El contacto reúne correo y teléfono como enlaces reales.
• El pie con firma gigante termina con el nombre del estudio, cortado por el borde inferior de la página.

El fondo de esta maquetación es el vídeo arrastrado por el desplazamiento: las imágenes de la película avanzan y retroceden con el desplazamiento. La palabra inglesa «scrub» viene del montaje, donde se recorre una línea de tiempo arrastrando el cabezal, y aquí es el visitante quien lo sostiene. Si el visitante ha pedido menos animación, la película se borra y su imagen de portada se queda. Esta película es una escena creada por una IA de vídeo a partir de tu descripción, no un extracto de tus proyectos: da el ambiente, tus imágenes se quedan en la galería. Encima se colocan dos texturas, el máximo permitido: la halación, el halo que desborda de las fuentes de luz como en la película fotográfica, y la trama, finas líneas horizontales como en un monitor, una elección asumidamente retro.

Un showreel que carga rápido

El plano más bello no sirve de nada si llega después de que el visitante se haya ido. En la web, nueve vídeos de cada diez duran menos de dos minutos (HTTP Archive, 2024): el tuyo también, con lo mejor en los primeros segundos. Luego, cuatro ajustes:

1. Una imagen de portada elegida. El atributo poster muestra una imagen mientras llega el vídeo; sin él, no se muestra nada antes de la primera imagen de la película, que sirve entonces de portada, bonita o no (MDN). Sigue siendo raro: solo aparece en el 3 % de los elementos de vídeo de las páginas móviles (HTTP Archive, 2024). Elige tu plano más fuerte: es el que se verá si el vídeo no arranca.
2. Sin sonido si arranca solo. Chrome siempre permite la reproducción automática de un vídeo sin sonido; con sonido, solo en ciertos casos, por ejemplo después de que el visitante haya interactuado con el sitio.
3. La versión completa al hacer clic, con sus controles: reproducir, pausa, volumen, avance (atributo controls).
4. Ninguna descarga forzada. El atributo preload es solo una indicación para el navegador. La especificación recomienda metadata por defecto, que solo recupera la información del archivo, como su duración, y el Web Almanac sugiere dejar decidir al navegador.

El formato más seguro sigue siendo el MP4, que lleva él solo el 68 % de los vídeos de las páginas móviles (HTTP Archive, 2024). Para el resto de la página, ver animar un sitio sin ralentizarlo.

El reproductor de una plataforma de vídeo

Alojar la versión larga en una plataforma de vídeo te ahorra el almacenamiento y adapta la calidad a la red del visitante. Pero un reproductor incrustado cuesta caro a la página que lo acoge: web.dev estima que aplazar la carga de un reproductor de YouTube ahorra unos 500 KB en la primera visualización. Aconseja una fachada: una imagen con un botón de reproducción, sustituida por el verdadero reproductor al hacer clic.

Estos reproductores vienen de otro sitio y pueden colocar rastreadores. La CNIL exige que el consentimiento se recoja antes de que un contenido externo incrustado active los rastreadores que lo necesitan, en el banner de cookies o al activar el contenido, y que una negativa no impida acceder al resto del sitio (2026).

Las páginas montadas por el estudio no incrustan el reproductor de otra plataforma: el botón de la portada lleva a tu showreel dondequiera que esté alojado.

Los errores que cuestan proyectos

• Un showreel de cinco minutos que guarda lo mejor para el final.
• Un vídeo pesado que arranca solo, con sonido.
• Una pantalla negra durante la carga, por falta de imagen de portada.
• Créditos vagos en un proyecto de equipo: di lo que hiciste, y nombra a la productora y a los demás estudios.
• Un proyecto bajo embargo publicado antes de su estreno, sin el acuerdo del cliente.
• Ninguna fecha: el motion design envejece rápido, muestra que tu trabajo es reciente.