Capturas de producto en una landing page SaaS

Una buena captura de producto en una landing page SaaS enseña una pantalla real de tu producto, recortada a la única zona donde aparece el valor y con datos reales dentro. Las formas abstractas, los dashboards borrosos y las tarjetas de cristal flotando no le dicen nada al comprador sobre si tu software hace su trabajo. Son el motivo más común de que un hero de SaaS falle.

Elige la pantalla donde se hace el trabajo

Elige la pantalla que un cliente fotografiaría para mandársela a su jefe. El informe terminado, la bandeja de entrada a cero, el calendario que dejó de duplicar reservas, la factura que se cobró. Las pantallas de login, los estados vacíos y los paneles de ajustes suspenden esta prueba, porque enseñan el software trabajando sobre sí mismo en lugar de sobre el problema del comprador. Si no puedes nombrar la pantalla correcta en una frase, pregúntale al equipo de producto qué vista abren más los usuarios.

Usa una pantalla, no cinco. Un carrusel con seis capturas de interfaz en la primera pantalla se lee como ruido. Guarda las demás para las secciones de más abajo, y pon cada una al lado de la afirmación que demuestra.

Usa datos reales o ninguno

Lorem ipsum, Acme Corp y 123.456 hacen que la captura parezca un mockup, y los lectores lo pillan más rápido de lo que los diseñadores esperan. Llénala de nombres, números y etiquetas que un cliente real de tu mercado reconocería. Si la herramienta es para reclutadores, mete puestos de trabajo. Si es para equipos de finanzas, usa cifras con forma realista, tipo 4.182,60 en lugar de 5.000.

Los números redondos se leen como datos de relleno, así que evita todo lo que acabe en tres ceros. Deja una fila en el encuadre que enseñe un problema que la herramienta ha detectado. Una pantalla donde todo está ya en verde no le da al comprador nada que desear.

Recorta fuerte, porque casi todo tu tráfico está en el móvil

El Conversion Benchmark Report de Unbounce pone el móvil en el 79% de las visitas a landing pages de SaaS. Mete un dashboard de escritorio entero en un viewport de 390 píxeles de ancho y cada etiqueta se convierte en una mancha gris. Recorta al único panel que sostiene la idea. Después mira el texto más pequeño de la imagen en un móvil de verdad. Si no lo lees con el brazo estirado, recorta más o pártelo en dos imágenes.

Una regla lo simplifica todo. El texto más pequeño dentro de la captura debería verse aproximadamente al mismo tamaño que el texto de cuerpo de la página en ese breakpoint. Todo lo que sea más pequeño es decoración, así que recórtalo en lugar de publicarlo.

Etiqueta la única cosa que quieres que se vea

Añade una sola etiqueta, flecha o caja de resalte apuntando a la parte que importa, y escribe de cuatro a seis palabras al lado. Algo como “esta columna se actualiza sola”. Usa una etiqueta, no cuatro. Añade una segunda y el lector tiene que elegir dónde mirar, y normalmente elige seguir bajando.

Sáltate las sombras, el brillo, la perspectiva 3D inclinada y el degradado de fondo detrás del marco. Suman peso y quitan legibilidad. Un marco de navegador plano, o directamente ningún marco, sobre un fondo sólido, se lee limpio en claro y en oscuro.

Cuándo un clip corto gana a una captura

Usa un loop corto cuando el valor está en el movimiento, como arrastrar algo, aplicar un filtro o ver un número recalcularse. Que dure menos de seis segundos. Sin sonido, con autoplay y en bucle. Asegúrate de que el primer fotograma funciona como imagen completa por sí solo, porque ese fotograma es lo que van a ver las conexiones lentas y la carga diferida de Framer.

Los tours interactivos de producto van por debajo de la primera pantalla y no en el hero. Cuestan peso de página de verdad, y le piden al visitante que trabaje antes de haber decidido que le importa.

Ajustes de exportación para las capturas, y una checklist

Exporta la interfaz a 2x para que el texto quede nítido. Sirve WebP o AVIF en lugar de PNG, y deja que Framer genere los tamaños responsive. Dale a la imagen del hero un ancho y un alto explícitos para que el layout no salte mientras carga. Mantén esa imagen por debajo de unos 200 KB después de comprimir. Escribe el texto alternativo describiendo qué se ve en la pantalla, y no la palabra captura.

Antes de publicarla, haz cinco comprobaciones. Si es una pantalla real. Si los datos son creíbles. Si lees el texto más pequeño en tu móvil. Si hay exactamente una etiqueta. Si enseña el resultado en lugar del marco de la interfaz. Cualquier “no” significa rehacerla, y eso lleva veinte minutos.