Cómo crear un vídeo del antes y el después de un rediseño web
Compara la misma tarea o página antes y después del rediseño y explica por qué el cambio ayuda al visitante. Una presentación se entiende mejor cuando muestra una diferencia relevante en vez de limitarse a recorrer una web más bonita.
Elige un conjunto pequeño de cambios. La portada, una ficha de producto y un proceso de reserva pueden bastar para contar la historia. Si no hay una comparación funcional, describe la pieza como una presentación visual en vez de sugerir mejoras de usabilidad medidas.
Captura vistas comparables
Usa el mismo tamaño de ventana y contenido comparable para cada pareja del antes y el después. Evita mostrar la página antigua a un tamaño incómodo mientras das condiciones ideales a la nueva. Conserva suficiente contexto para que alguien reconozca qué ha cambiado.
Guarda la grabación o captura original con el proyecto. No inventes un diseño antiguo para que el rediseño parezca más impresionante. Obtén la aprobación del cliente antes de hacer públicos la identidad de marca anterior o materiales de un entorno privado de pruebas.
Estructura la presentación en torno a cambios útiles
| Parte | Qué mostrar | Qué explicar |
|---|---|---|
| Contexto | La marca y el sitio | Por qué existe una web nueva |
| Primera comparación | Vistas comparables de la portada | Un mensaje o una jerarquía más claros |
| Segunda comparación | Una tarea importante | Una mejora funcional verificada |
| Detalle | Una interacción elegida con cuidado | Qué distingue la nueva experiencia |
| Cierre | El destino publicado | Dónde pueden explorarlo los visitantes |
Identifica los juicios creativos como opiniones. Un espaciado más limpio no demuestra una mayor conversión. Si el cliente ha medido resultados de rendimiento, incluye el periodo y el método de medición junto a la afirmación.
Elige transiciones que revelen información
Un barrido o un corte directo pueden aclarar una comparación. Una transición que oculte ambas versiones puede resultar impresionante y a la vez esconder la diferencia. Deja tiempo suficiente para que los espectadores que no conocen el proyecto entiendan la página.
Muestra vistas móviles cuando la experiencia móvil forme parte de la historia. No comprimas una página de escritorio completa dentro de un marco de teléfono y lo llames demostración de diseño adaptable.
Inserta el resultado con cuidado
Si el vídeo aparece en un caso de estudio, usa un archivo y una experiencia de reproducción adecuados. web.dev señala: «Los GIF animados pueden llegar a ser enormes» (traducción). Su guía explica una alternativa basada en vídeo para contenido animado. Guía de rendimiento de web.dev.
Comprueba la vía de inserción que admite la plataforma. Webflow documenta elementos de vídeo de terceros y otras opciones, incluido el vídeo de fondo. Guía de vídeo de Webflow. Un bucle decorativo silenciado y un vídeo explicativo con audio tienen necesidades diferentes.
Dónde encaja un servicio de web a vídeo
Teasr es una elección sencilla para anunciar la nueva web: usa su URL pública para crear una promoción animada de marca sin reconstruir el diseño en un editor. No reconstruye automáticamente la historia de la web ni proporciona una comparación verificada del antes y el después. Prepara esas capturas originales por separado si la comparación es central en el briefing.
Consulta incluir vídeos de lanzamiento en paquetes de agencia y vídeos de producto fieles a la marca para preparar el briefing y la aprobación.