Blog

Cómo revisar un diseño con capturas anotadas

Publicado · revisión de diseño, comentarios, anotaciones, flujo de trabajo

Cómo revisar un diseño con capturas anotadas

Un ciclo de revisión de diseño ligero: captura el estado, anota con precisión, compara versiones y entrega un conjunto de notas claro en vez de un hilo vago.

La retroalimentación de diseño falla de formas previsibles: la nota se refiere a algo que ya ha cambiado, tres personas describen el mismo problema en tres hilos y nadie sabe de qué versión salió la captura. Un ciclo de revisión basado en capturas arregla casi todo eso con un poco de disciplina.

Captura el estado, no la historia

Empieza con una captura del estado exacto sobre el que comentas, no con una descripción. En InSnap:

  1. Pulsa Command-1 en Mac o Ctrl+1 en Windows.
  2. Pasa el cursor sobre la ventana del navegador y deja que la detección automática la encuadre, o arrastra una región alrededor del componente.
  3. Incluye el contexto que importa —el ancho del viewport, la maquetación de alrededor, el estado de un formulario— y nada más.

Una captura tomada en la página que estás revisando es una prueba. Una captura de una página parecida de la semana pasada es una fuente de confusión.

ANOTACIÓN DE UNA CAPTURA CON FORMAS · 1280 × 800

Anota con un vocabulario compartido

La forma más rápida de que las notas de revisión sean comparables es acordar qué significa cada herramienta:

HerramientaÚsala para
FormasAgrupar una región o delimitar un componente
FlechaSeñalar desde una nota hasta el elemento exacto
NúmerosEnumerar varios problemas en una misma captura
MarcadorResaltar el texto que hay que cambiar
Foco (Pro)Centrar la atención en una zona de una maquetación cargada
Lupa (Pro)Mostrar un detalle a nivel de píxel, como la alineación

Mantén un significado por herramienta en todo el equipo. Si las flechas significan «cambia esto», no las uses para «esto me gusta».

Una captura por problema

Una sola captura con doce anotaciones es difícil de comentar. Una captura por problema es fácil de resolver, referenciar y cerrar.

  • Recorta justo alrededor del componente, pero conserva contexto suficiente para localizarlo.
  • Numera los problemas si están relacionados.
  • Pon el razonamiento en el mensaje, no en una pared de texto sobre la imagen.
  • Incluye el tamaño del viewport y el nivel de zoom cuando el tema sea la maquetación; una captura al 50 % puede ocultar justo el desbordamiento que estás denunciando.

Compara versiones con capturas fijadas

La forma más rápida de responder «¿ha cambiado?» es tener las dos versiones en pantalla a la vez. Fija la captura anterior y la actual; las ventanas fijadas flotan por encima de las demás apps, así que puedes arrastrarlas una al lado de la otra sobre el navegador y comparar sin cambiar de pestaña.

Aquí también ayuda el historial de capturas: las capturas pasadas son buscables, así que el estado «antes» normalmente ya está.

Fijar una captura para comparar

Entrega un enlace o un archivo

  • Un problema: adjunta la imagen anotada, o comparte un enlace si quien lo recibe no debería descargar nada.
  • Varios problemas: una lista numerada en el mensaje, con cada número correspondiendo a una anotación.
  • Una revisión recurrente: guarda las capturas en el historial, etiquetadas por proyecto o incidencia, para que la siguiente ronda parta del estado anterior.

Si usas InSnap Cloud, el enlace compartido puede tener fecha de caducidad y contraseña, algo útil para revisiones con clientes que no deberían quedarse online para siempre. Cloud es una suscripción opcional y no hace falta para el flujo local.

Una lista de comprobación para la revisión

ComprobaciónPor qué
¿La captura es de la versión actual?Las notas sobre imágenes obsoletas gastan una ronda
¿Se ve el problema sin explicación?Si no, la anotación está haciendo demasiado
¿Hay un problema por captura?Es más fácil de resolver y cerrar
¿Se indican el viewport o el zoom?Los fallos de maquetación dependen de eso
¿Se ve algo privado?Difumina nombres, correos y URL internas
¿La acción está clara?«Mueve el botón a la izquierda» gana a «el espaciado no cuadra»

Preguntas frecuentes

¿Conviene anotar la captura o escribir el comentario en el mensaje?

Las dos cosas, para trabajos distintos: la anotación muestra dónde, el mensaje explica qué y por qué. No metas un párrafo dentro de la imagen; se pasará por alto y no se puede buscar.

¿Cómo comparo dos versiones una al lado de la otra?

Fija las dos capturas. Las ventanas fijadas se quedan por encima de las demás aplicaciones, así que puedes colocarlas juntas y comparar con el navegador abierto.

¿Puedo compartir la revisión sin que quien la recibe instale InSnap?

Sí. Envía el archivo de imagen o usa un enlace compartido de Cloud, que se abre en un navegador normal. Cloud es una suscripción opcional; el flujo gratuito es guardar y adjuntar la imagen.

Tu próxima captura está a un atajo de distancia.

macOS 14.4+ (Apple Silicon e Intel) · Windows 10+ (64 bits)