Prints do produto numa landing page de SaaS

Um bom print de produto numa landing page de SaaS mostra uma tela real do seu produto, cortada na única área onde o valor aparece, com dados reais dentro. Formas abstratas, dashboards borrados e cards de vidro flutuando não dizem nada ao comprador sobre o seu software dar conta do trabalho dele. São o motivo mais comum de um hero de SaaS falhar.

Escolha a tela onde o trabalho acontece

Escolha a tela que um cliente fotografaria para mandar para o chefe. O relatório pronto, a caixa de entrada zerada, a agenda que parou de marcar duas coisas no mesmo horário, a fatura que foi paga. Telas de login, estados vazios e painéis de configuração reprovam nesse teste, porque mostram o software funcionando sobre ele mesmo em vez de sobre o problema do comprador. Se você não consegue dizer a tela certa em uma frase, pergunte ao time de produto qual visão os usuários mais abrem.

Use uma tela, não cinco. Um carrossel com seis imagens de interface acima da dobra parece barulho. Guarde as outras telas para as seções mais abaixo, e coloque cada uma do lado da afirmação que ela prova.

Use dados reais ou dado nenhum

Lorem ipsum, Acme Corp e 123.456 fazem o print parecer um mockup, e o leitor percebe isso mais rápido do que os designers imaginam. Preencha com nomes, números e rótulos que um cliente de verdade do seu mercado reconheceria. Se a ferramenta atende recrutadores, coloque cargos ali. Se atende times financeiros, use valores com cara de realidade, tipo 4.182,60 em vez de 5.000.

Número redondo parece dado de enfeite, então evite qualquer coisa terminada em três zeros. Deixe uma linha no quadro mostrando um problema que a ferramenta pegou. Uma tela em que já está tudo verde não dá ao comprador nada para querer.

Corte sem dó, porque a maior parte do seu tráfego está no celular

O Conversion Benchmark Report da Unbounce coloca o celular em 79% das visitas a landing pages de SaaS. Reduza um dashboard de desktop inteiro para uma viewport de 390 pixels de largura e cada rótulo vira uma mancha cinza. Corte no único painel que carrega o ponto. Depois confira o menor texto da imagem num celular de verdade. Se você não consegue ler a um braço de distância, corte mais ou divida em duas imagens.

Uma regra deixa isso simples. O menor texto dentro do print deve aparecer mais ou menos do mesmo tamanho que o texto de corpo da página naquele breakpoint. Qualquer coisa menor é decoração, então corte fora em vez de publicar.

Marque a única coisa que você quer que vejam

Adicione um rótulo, uma seta ou uma caixa de destaque apontando para a parte que importa, e escreva de quatro a seis palavras do lado. Algo como esta coluna se atualiza sozinha. Use um rótulo, não quatro. Coloque um segundo e o leitor tem que escolher para onde olhar, e normalmente escolhe rolar a página.

Pule as sombras, o brilho, a perspectiva 3D inclinada e o degradê atrás do quadro. Eles aumentam o tamanho do arquivo e tiram legibilidade. Um quadro de navegador chapado, ou quadro nenhum, sobre um fundo sólido, se lê limpo tanto no claro quanto no escuro.

Quando um clipe curto ganha do print

Use um loop curto quando o valor está no movimento, tipo arrastar alguma coisa, um filtro sendo aplicado ou um número se recalculando. Deixe abaixo de seis segundos. Sem som, com autoplay e em loop. Garanta que o primeiro quadro funciona como imagem completa sozinho, porque é esse quadro que as conexões lentas e o carregamento preguiçoso do Framer vão mostrar.

Tours interativos de produto ficam abaixo da dobra, e não no hero. Eles custam peso de página de verdade e pedem que o visitante trabalhe antes de ter decidido se importar.

Ajustes de exportação para prints do produto, mais um checklist

Exporte a interface em 2x para o texto continuar nítido. Sirva WebP ou AVIF em vez de PNG, e deixe o Framer gerar os tamanhos responsivos. Dê largura e altura explícitas à imagem do hero para o layout não pular enquanto ela carrega. Mantenha essa imagem abaixo de uns 200 KB depois da compressão. Escreva um texto alternativo descrevendo o que a tela mostra, em vez da palavra print.

Antes de publicar, rode cinco checagens. É uma tela real. Os dados são críveis. Dá para ler o menor texto no seu celular. Tem exatamente um rótulo. Ela mostra o resultado em vez da moldura da interface. Qualquer não significa refazer, e isso leva vinte minutos.