Device mockup

Um device mockup é uma imagem que mostra uma captura de tela dentro de uma moldura de dispositivo desenhada ou fotografada, como um celular, um tablet, um notebook ou uma janela de navegador. A moldura mostra ao espectador onde a interface roda.

Cada modelo de mockup tem uma área de tela com tamanho e proporção fixos. A captura precisa corresponder a essa área, ou será esticada, cortada ou cercada por espaço vazio. Modelos baseados em fotografias também aplicam perspectiva, então a captura é deformada para caber na tela inclinada.

Um mockup é uma imagem de apresentação. Ele é diferente da emulação de dispositivo, que muda a forma como a própria página é renderizada.

Por que os device mockups importam

Uma captura simples de tela de celular em uma página web pode parecer um retângulo alto e aleatório. A moldura informa ao espectador, de uma vez, o tamanho da tela e o contexto. Ela também dá um aspecto uniforme a capturas diferentes em uma landing page ou em uma apresentação.

Molduras de dispositivo comuns

• Celulares na orientação retrato, com ou sem a área do notch ou da Dynamic Island.
• Tablets na orientação retrato ou paisagem.
• Notebooks com a tela inclinada.
• Janelas de navegador com uma barra de endereço simples, usadas em capturas de aplicativos web.

Como criar device mockups

1. Capture a tela na proporção da área da moldura.
2. Abra um modelo de mockup em uma ferramenta de design ou em um gerador de mockups.
3. Posicione a captura na área da tela e verifique os cantos e o notch.
4. Exporte no tamanho que o destino precisa.

No Temposhot, o seletor Custom Area tem predefinições de celular, como iPhone 17 Pro (402×874), iPhone 17 Pro Max (440×956), Galaxy S25 (360×780) e Pixel 9 (360×808). Para páginas web, o Website Capture tem o tamanho de dispositivo Mobile de 390×844.

Erros comuns

• Usar uma captura com proporção diferente, o que faz a moldura cortar conteúdo.
• Ampliar uma captura pequena para preencher uma moldura grande, o que deixa o texto borrado.
• Usar um mockup onde a loja espera uma captura de tela simples. Verifique os requisitos atuais da loja.
• Usar molduras de dispositivos desatualizadas que não correspondem mais ao hardware atual.

Repetindo as mesmas capturas o tempo todo?

Capture todas as telas de tamanho de celular em uma só execução com automação de captura de tela no Mac.

Perguntas frequentes

As lojas de aplicativos aceitam mockups?

As regras variam de loja para loja e mudam com o tempo. Leia as diretrizes atuais de capturas de tela da loja antes de enviar.

Qual resolução a captura deve ter?

Pelo menos o tamanho em pixels da área da tela da moldura. Uma captura Retina geralmente fornece pixels suficientes.

Fontes

• Mockup (Wikipedia)

Recursos relacionados

• Fontes de captura: predefinições de Custom Area.
• Social Image Composer: posiciona uma captura de tela sobre um fundo com margens.
• Aspect Ratio Calculator: ajusta a proporção da tela de uma moldura.