Apresente capturas de ecrã em mockups de navegador e dispositivos

Prepare a captura de ecrã

Comece pela captura mais limpa disponível. Remova alertas temporários, dados pessoais e detalhes de estado acidentais antes de a colocar. Mantenha a interface importante perto do centro, pois uma moldura ou tratamento em perspetiva pode reduzir a área legível. Se estiver a mostrar um fluxo, escolha um ecrã decisivo ou crie uma série pequena com a mesma lógica de recorte.

Use um estilo de navegador quando o conteúdo for uma página web ou uma vista semelhante a um computador. Use um estilo de telefone ou tablet quando o layout tátil e a leitura vertical forem centrais. Estas são molduras decorativas: não abrem um navegador, não carregam um URL nem alteram a captura. A distinção ajuda a definir expectativas honestas para a imagem final.

1. Escolha uma captura com um tema claro e remova conteúdo sensível.
2. Decida se o enquadramento de navegador, iPhone ou iPad explica melhor o contexto.
3. Confirme que o texto e os controlos importantes continuarão visíveis dentro da moldura.

Coloque a moldura e escolha o cenário

Selecione um fundo que apoie a captura. Uma cor lisa e tranquila funciona para documentação; uma fotografia suave ou uma paisagem natural pode tornar mais calorosa uma apresentação de produto. Coloque o mockup com espaço suficiente à volta para ver a margem da moldura. Numa janela de navegador, mantenha os elementos reconhecíveis sem deixar que os controlos decorativos compitam com a página.

Mantenha a perspetiva credível. Uma ligeira inclinação pode dar energia, mas uma rotação acentuada dificulta a leitura de texto pequeno. Alinhe o mockup com a direção visual do fundo. Uma moldura inclinada para o espaço aberto parece intencional; uma que aponta para um objeto confuso parece apertada.

Leia também: como adicionar uma moldura de iPhone a uma captura de ecrã

1. Escolha um fundo simples ou uma imagem sua com contraste suficiente.
2. Posicione a moldura decorativa e deixe uma margem em redor da borda exterior.
3. Experimente primeiro a versão direita e compare depois qualquer inclinação ao tamanho final de partilha.

Verifique a legibilidade e a credibilidade

Afaste o zoom e pergunte o que o espectador nota primeiro. A captura deve continuar a ser o tema, enquanto a moldura indica que tipo de ecrã é. Se o fundo dominar, simplifique-o ou reduza o seu contraste. Se a captura desaparecer, aumente o mockup ou use um cenário mais calmo.

Inspecione cantos, texto e margens. Cortar uma moldura demasiado rente pode parecer acidental; deixar uma faixa estreita e desigual de fundo pode distrair mais do que um recorte deliberado. Mantenha as capturas na proporção original sempre que possível e evite esticar um ícone circular ou uma pessoa numa fotografia.

Os estilos de moldura e as condições Pro podem mudar entre versões da aplicação, por isso verifique o painel Mockups atual antes de planear uma série.

1. Reveja a hierarquia e depois inspecione o texto e as margens da moldura.
2. Compare o resultado em tamanho completo e no tamanho usado numa publicação ou artigo.
3. Adicione uma legenda curta fora da captura se o espectador precisar de contexto.

Resolva problemas comuns dos mockups

Se a captura parecer esticada, substitua-a pela proporção original e volte a ajustá-la. Se o texto for demasiado pequeno, recorte a área relevante ou use uma moldura maior. Se a moldura e o fundo tiverem cores semelhantes, crie separação através de outro fundo ou de um tratamento mais contido. Se a imagem parecer inclinada sem motivo, volte ao alinhamento direito.

Se o fundo próprio estiver ocupado, não esconda a captura com decoração pesada. Mova o mockup para uma zona mais calma, reduza a competição visual ou escolha uma cor mais simples. Exporte um teste e inspecione o resultado guardado antes de o enviar a um cliente ou publicar.

1. Corrija a proporção antes de alterar a escala.
2. Resolva a legibilidade com recorte e hierarquia antes de adicionar decoração.
3. Pré-visualize uma vez a imagem guardada no tamanho real do destino.