Cómo crear el guion gráfico de una demo de producto antes de animarla
El guion gráfico de un vídeo de demostración de producto es donde descubres que el final no se desprende del principio. Conviene descubrirlo antes de grabar seis tomas, elegir la música o pulir una transición. Una fila de fotogramas esquemáticos puede revelar una entrada que falta o un cambio sin explicar con mucho menos coste que una animación terminada.
En software, el guion gráfico tiene una responsabilidad particular: conservar la lógica del producto. Una pieza puede parecer fluida mientras salta entre estados de interfaz sin relación. También puede mostrar cada clic y seguir dejando al espectador sin entender por qué importa la tarea. El guion gráfico debe conectar la pregunta del público, la interacción real y el resultado que puede examinar.
El ejemplo que desarrollaremos es un flujo de aprobación: una persona recibe un borrador para revisarlo, detecta un problema, deja un comentario concreto y ve la versión corregida.
Escribe el resultado antes de dibujar el inicio
Empieza por el estado final que respondería a la pregunta del público. En el ejemplo de aprobación, el resultado importante es un borrador corregido con las observaciones resueltas. Una tarjeta decorativa de «Done» no basta por sí sola. El espectador necesita reconocer qué se ha corregido y cómo se relaciona con el problema original.
Escribe ese resultado en una oración e identifica después qué debe aparecer antes para que tenga sentido. El público necesita ver el borrador, el problema pertinente y el comentario que pide un cambio. Probablemente no necesita ver cómo la persona que revisa inicia sesión o busca entre proyectos ajenos a la tarea.
Este repaso en sentido inverso evita que el inicio consuma toda la pieza. Los equipos suelen empezar con una presentación de la empresa porque parece natural comenzar por el principio de la organización. El principio del espectador suele ser otro: una tarea que necesita realizar.
Mantén la honestidad del resultado. Si las imágenes solo muestran el envío de un comentario, el final no debe sugerir que la corrección se completó automáticamente. Captura el flujo completo o limita la promesa del vídeo a la parte que puedes demostrar.
Usa el guion gráfico para tomar decisiones, no para decorar un documento
Un guion gráfico no necesita dibujos bonitos. Necesita suficiente información visual para mostrar dónde mirará el espectador y suficiente información escrita para explicar qué cambia. Una captura con un recuadro de encuadre aproximado puede resultar más útil que una ilustración pulida de una interfaz inexistente.
La hoja de planificación de demos de Salesforce es una referencia útil porque organiza la demostración en torno a una pregunta, una idea clave y un recorrido deliberado. Puedes adoptar su énfasis en el propósito antes de traducir la demostración en fotogramas individuales.
Para cada plano propuesto, escribe a qué pregunta del público responde. «¿Dónde está el problema?» y «¿Qué ha cambiado?» son preguntas diferentes. Si dos planos consecutivos responden a la misma pregunta sin aportar pruebas nuevas, puede que sobre uno. Si ningún plano responde a una pregunta esencial, el guion gráfico ha encontrado un vacío.
Haz que el documento sea fácil de revisar. Un guion gráfico encerrado en una presentación de diseño elaborado puede desanimar a introducir cambios justo cuando más valor tienen. La versión de trabajo debe permitir mover, eliminar o sustituir un plano con facilidad.
Usa los campos del recorrido para detectar lo que falta en medio
La mitad inferior de la hoja de Salesforce pide un reto, un recorrido enlazado por «because», «therefore» y «but» —porque, por tanto y pero— y un resultado final. Estas indicaciones abordan un problema distinto del de la pregunta inicial: comprueban si los acontecimientos se derivan unos de otros. Un guion gráfico con seis pantallas atractivas puede seguir fallando en esa prueba.
Prueba los conectores en la secuencia de revisión. La persona selecciona una frase porque está mal redactada. Por tanto, el comentario debe seguir vinculado a esa frase. Pero el comentario por sí solo no muestra que el autor haya actuado. El último plano necesita la frase corregida o la historia debe terminar con el envío de las observaciones. La captura que falta se vuelve evidente al escribir la secuencia en términos causales.
Traslada ese descubrimiento al propio guion gráfico. Añade un espacio para el borrador corregido, identifica quién lo capturará y mantén visible el mismo título de documento en el estado anterior. Si la corrección sigue pendiente, termina una demo más breve centrada en los comentarios en lugar de llenar ese espacio con una tarjeta decorativa de éxito. La hoja ayuda a decidir qué capturar; el guion gráfico decide después cuánto espacio en pantalla y cuánto tiempo estable necesita cada captura.
Da cinco datos a cada fotograma
Un fotograma útil de una demo de software necesita un estado visible, un encuadre, una acción o cambio, una explicación breve y una intención temporal. No hacen falta cinco casillas separadas en cada página. Pero alguien que no participó en la conversación sobre el guion debe poder recuperar esos cinco datos.
El estado visible identifica la pantalla o el recurso real. El encuadre indica qué parte aparece. La acción describe lo que ocurre durante el plano. La explicación recoge la narración o el texto editorial. La intención temporal indica a quien lo produce si se trata de un momento rápido de orientación o de un resultado que requiere examen.
| Fotograma | Prueba del producto | Atención del espectador | Condición para pasar al siguiente plano |
|---|---|---|---|
| Borrador | El borrador real antes de revisarlo | La sección pertinente | El espectador sabe qué se está revisando |
| Problema | El mismo borrador, más cerca | La frase incorrecta | El problema se puede identificar |
| Comentario | El estado real del comentario | La corrección solicitada | La instrucción se puede leer |
| Corrección | El borrador actualizado y verificado | La frase modificada | El resultado se puede comparar |
La condición para pasar al siguiente plano es especialmente útil. Describe lo que el espectador debería entender antes de que llegue el próximo. «Mantener dos segundos» puede servir como instrucción inicial, pero «mantener hasta que se pueda leer la corrección breve a tamaño móvil» explica por qué existe esa permanencia.
Marca las capturas que faltan junto a los planos propuestos. Si el borrador corregido no se ha grabado, asigna esa captura antes de empezar a animar; de lo contrario, quien produce la pieza tendrá que detener la historia en el comentario o sustituir el final por otro más débil.
Controla la continuidad de estados a lo largo de la secuencia
La continuidad del software suele importar más que la continuidad visual. El nombre del proyecto, el título del elemento, la cuenta seleccionada y el estado de la tarea deben mantenerse salvo que la historia explique el cambio. Una disolución suave entre dos proyectos diferentes no repara la ruptura lógica.
Crea una pequeña nota de continuidad para el ejemplo. Registra el proyecto, el título del borrador, la frase objetivo y el texto del comentario. Usa la nota al capturar cada estado. Es más fácil detectar un desajuste mientras preparas las imágenes que una vez colocadas la música y la tipografía finales.
Comprueba qué ocurre entre planos, no solo dentro de ellos. Si el comentario está abierto al final de un plano y el siguiente comienza con el borrador corregido, decide cómo comunica el montaje que se ha realizado ese trabajo. Puede que necesites una transición breve, un rótulo o una grabación real de la corrección.
Conserva la causa cuando importe. Una demo no debería situar un clic en un botón ajeno justo antes de un resultado si ese montaje sugiere que el botón lo provocó. El guion gráfico es el lugar adecuado para detectarlo, porque todavía es fácil reorganizar la posición del puntero y los cambios de estado.
Distingue las pruebas en pantalla de la explicación editorial
La interfaz real muestra al espectador lo que contiene el producto. El texto editorial explica por qué importa una parte concreta. Separar esas funciones facilita tanto entender la pieza como actualizarla.
Por ejemplo, un rótulo puede decir «Mantén los comentarios vinculados al problema» mientras sigue visible la interfaz real de comentarios. Sustituir las etiquetas del producto por texto de marketing desdibujaría esa separación. Si una etiqueta de la interfaz es incorrecta o está desactualizada, actualiza la captura del producto en lugar de pintarla por encima en el guion gráfico.
Usa las anotaciones para dirigir la atención, no para crear funciones. Un contorno alrededor de un comentario puede ser un resaltado editorial. Un botón animado nuevo que nunca existió en el producto es otro tipo de afirmación. Cuando sea necesario incluir elementos conceptuales, identifícalos como conceptos y no dejes que se hagan pasar por comportamiento grabado.
Esta distinción también ayuda al mantenimiento. Los rótulos editoriales pueden cambiar independientemente de la captura. Los cambios del producto requieren una captura nueva. El guion gráfico debe dejar claro qué clase de cambio necesita una revisión futura.
Planifica el movimiento de cámara como una secuencia de destinos
Escribe dónde empieza la cámara, dónde termina y por qué se mueve. «Empieza con el borrador, acércate a la frase resaltada y mantén el plano» da un destino a la animación. «Añade zooms dinámicos» no identifica qué debería aprender el espectador con ellos.
Un movimiento de cámara puede establecer la relación entre un control y su resultado. También puede destruirla si recorre demasiada distancia o va demasiado deprisa. Comprueba si el espectador sigue reconociendo el contexto original cuando termina el movimiento. Un título conocido o el límite de una sección pueden actuar como ancla.
Evita usar el encuadre más cerrado posible en todos los planos. Los primeros planos mejoran el detalle, pero eliminan la orientación. Alterna con intención: muestra suficiente contexto para situar la tarea, acércate para la acción importante y revela después el resultado a una escala que permita entenderlo.
Incluye en el guion gráfico el fotograma estable posterior al movimiento. Suele ser la imagen más importante, porque es donde el espectador lee o compara. Si el guion solo contiene posiciones intermedias espectaculares, puede pasar por alto si la información real recibe espacio suficiente.
Comprueba juntos el texto y los tiempos
No se puede revisar una oración independientemente del tiempo y el espacio disponibles para leerla. Coloca el texto previsto en el fotograma aproximado a un tamaño cercano al final. El texto provisional oculta problemas de saltos de línea, longitud y énfasis.
Lee la secuencia a la escala de visualización esperada. Una captura de escritorio mostrada en un reproductor social pequeño puede necesitar un encuadre mucho más cerrado que esa misma captura en una presentación grande. Si la frase clave desaparece a esa escala, cambia el encuadre antes de invertir en animación detallada.
Separa el tiempo de entrada en el plano del tiempo disponible para leer. Un texto que se desliza hasta su posición durante casi todo el plano puede tener muy poco tiempo de lectura estable. El guion gráfico debe reservar una permanencia tras la entrada, especialmente cuando la propia interfaz contiene etiquetas importantes.
No resuelvas todos los problemas de tiempo alargando el vídeo. A veces la narración repite lo que ya dice la pantalla o el rótulo intenta explicar dos ideas a la vez. Acortar el texto puede mejorar la secuencia más que añadir otro segundo a cada plano.
Adopta la disciplina de los marcadores de plano
La documentación de guiones gráficos de iMovie de Apple describe cómo añadir contenido a los marcadores de un guion gráfico. La idea de producción útil es que un plano tiene una función antes de seleccionar su contenido definitivo. Sus marcadores ayudan a separar la función de un plano de los archivos que acabarán ocupándolo.
Aplica esa disciplina a una demo de software nombrando la prueba que necesita cada espacio. «Pantalla de resultado que muestra la frase corregida» es un marcador más sólido que «plano bonito del producto». Indica a la persona que reúne los recursos qué satisfaría la historia.
Un marcador también debe hacer visible la incertidumbre. Si todavía no se puede capturar el estado de resultado porque la función está sin terminar, márcalo como pendiente. No dejes que una maqueta pulida convierta silenciosamente una capacidad prevista en una capacidad demostrada.
Cuando llegue el contenido real, vuelve a revisar el plano. La pantalla disponible puede tener una forma o densidad distinta de la sugerida por el dibujo inicial. Deja que la composición responda a las pruebas en vez de forzarlas dentro de una composición que ya no funciona.
Haz visible en el plan el recurso que falta
Para el ejemplo de revisión, nombra los recursos de trabajo por estado: draft-before, comment-open y draft-corrected. Anota junto a cada uno si ya se ha capturado, verificado o sigue haciendo falta. Si falta draft-corrected, el guion gráfico debe mostrar un espacio pendiente en lugar de sustituirlo discretamente por una imagen de celebración.
Este pequeño inventario también revela qué se puede reutilizar. El plano general del borrador y el detalle de la frase pueden proceder de la misma captura original. El estado corregido necesita su propia prueba. Una lista de planos que distingue los recortes de los estados nuevos ayuda a quien reúne el material a evitar tanto trabajo innecesario como transiciones sin respaldo.
Haz una secuencia aproximada con tiempos antes de pulirla
Coloca las pantallas propuestas en orden con cortes sencillos y permanencias provisionales. Esta secuencia inicial no necesita música, transiciones elaboradas ni tratamiento de color definitivo. Su función es revelar si se puede seguir la historia en el tiempo disponible.
Mírala sin pausar. Después explica la tarea en una oración. Si la explicación depende de conocimientos que nunca aparecieron en la secuencia, añade el contexto que falta o acota la promesa. La revisión del guion gráfico aporta más valor cuando detecta pronto estos problemas estructurales.
Vuelve a mirar con narración o rótulos. Busca competencia entre lectura y acción. Un comentario denso que aparece a la vez que una nueva instrucción hablada puede exigir demasiada atención. Adelanta uno de los dos, simplifica el texto o permite una permanencia tranquila.
Solo cuando funcione la secuencia inicial deberías refinar las transiciones. Una transición bonita entre dos estados sin relación puede dificultar detectar el problema, pero no refuerza la lógica. La historia debería sostenerse con cortes normales.
La sencilla tarjeta «Done.» de Focus aporta un momento de finalización en esa pieza. Para el guion gráfico de revisión, mantén visible la redacción corregida antes de usar una tarjeta de finalización; de lo contrario, el público ve un estado sin ver la corrección.
Pregunta a quienes revisan por los vacíos, no por sus preferencias
Da una tarea concreta a quienes revisan. Pregunta dónde perdieron el hilo, qué resultado entendieron o qué esperaban que sucediera después. Estas preguntas producen observaciones iniciales más útiles que preguntar si les gusta el estilo de animación.
Separa la revisión de hechos de la revisión creativa. Alguien que conoce el producto puede verificar la secuencia de estados y las etiquetas. Alguien menos familiarizado puede revelar el contexto que falta. Las dos perspectivas se complementan, pero ninguna debe sustituir a la otra.
Registra los desacuerdos en términos de necesidades del espectador. Si una persona quiere un inicio más largo y otra un arranque más rápido, identifica qué información debe establecer ese inicio. Tal vez puedas acortar la introducción y conservar el único dato que realmente necesita el público.
Evita incorporar todas las funciones solicitadas al mismo guion gráfico. Una sugerencia puede ser válida y pertenecer aun así a otro vídeo. Mantén visible la pregunta central para que la secuencia no se convierta durante la revisión en un recorrido general por el producto.
Convierte el guion gráfico aprobado en una entrega para producción
El guion gráfico final debe vincular cada plano con su recurso original real, texto aprobado, intención temporal y asunto pendiente. Retira las alternativas obsoletas de la secuencia activa para que quien produce no tenga que adivinar qué versión se aprobó.
En un brief de OpenDesign Motion, puedes describir el orden de las escenas y adjuntar los recursos correspondientes. Pide el proyecto editable y el vídeo renderizado, y conserva el guion gráfico junto a ellos. El documento explica la historia prevista; el archivo exportado muestra lo que realmente se produjo.
Trata los cambios del guion gráfico como cambios del plan, no como cambios automáticos de un MP4 existente. Una línea revisada o una nota de tiempos todavía debe implementarse y renderizarse. Compara el nuevo resultado con la secuencia aprobada antes de dar el trabajo por terminado.
Un guion gráfico útil para una demo de producto es, por tanto, algo más que una fila de fotogramas atractivos. Es un acuerdo compacto sobre pruebas, atención y secuencia. Cuando esas decisiones están claras, la animación puede facilitar seguir la explicación en lugar de intentar inventarla a posteriori.