¿Cómo se graban webs para un portfolio?

• La web publicada, no el archivo de diseño. Contenido real, imágenes reales, tipografía renderizada de verdad. Si el cliente la ha cambiado desde entonces, usa lo que haya o graba la versión que tengas archivada.
• Primero la página de escritorio, después la de móvil. Dos vídeos uno al lado del otro, escritorio y móvil, muestran el trabajo responsive mejor que cualquier pie de foto. Lee la versión móvil con ancho de móvil para que la web sirva su maquetación para móvil real.
• Claro y oscuro, si diseñaste los dos. Fuerza el modo claro u oscuro con «Esquema de color» en lugar de cambiar los ajustes de tu sistema entre tomas.
• Las interacciones de las que estás orgulloso. Lleva un cursor hasta las tarjetas y los botones cuyos estados hover diseñaste, y se reproducirán en el vídeo.

Quien hojea un portfolio le da a cada proyecto unos segundos antes de decidir si se queda. Haz que el scroll arranque enseguida, o tras una espera de un segundo más o menos en la cabecera, y mantén todo el scroll entre 10 y 20 segundos.

Las pausas aportan más a un vídeo de portfolio que cualquier otra cosa. Detén el scroll uno o dos segundos en cada sección que muestre una decisión: la cabecera, la cuadrícula de funciones, la tabla de precios. Caben hasta 6 pausas en un vídeo, de entre 0,5 y 5 segundos cada una. Si la página es larga, recorta el scroll para que termine antes del pie en lugar de acelerarlo todo.

Revisa los límites de subida de cada plataforma antes de exportar en 4K: un archivo en 1080p suele ser la opción más segura para todo lo que se vaya a recodificar al subirlo.

Doce proyectos capturados de doce maneras distintas parecen el trabajo de doce personas distintas. Decide la presentación una vez y repítela.

• Un solo marco. Una ventana de Safari o Chrome, clara u oscura, o un borde sencillo. El mismo en todos los proyectos.
• Un solo fondo. Un color sólido, un degradado, uno de los 36 fondos predefinidos o tu propia imagen detrás de la ventana, suavizada con desenfoque y grano si es una foto.
• Un solo movimiento y una sola velocidad. El mismo suavizado, más o menos los mismos segundos por pantalla de página.
• Margen, esquinas y sombra ajustados una vez, para que la ventana quede igual en cada fotograma.

Un vídeo en bucle y sin sonido se comporta como una imagen animada y se reproduce solo en cualquier navegador moderno, siempre que esté silenciado y tenga permitido reproducirse dentro de la página. Usa Bajar y volver como Reproducción para que el último fotograma coincida con el primero y el bucle no dé saltos.

<video autoplay muted loop playsinline preload="metadata"
       poster="project-poster.jpg" width="1920" height="1080">
  <source src="project.webm" type="video/webm" />
  <source src="project.mp4" type="video/mp4" />
</video>

El ancho y el alto evitan que la maquetación salte mientras carga el archivo, y el póster le da al hueco algo que mostrar antes de que llegue el primer fotograma.