Ferramentas para colocar telas de um aplicativo ou site em molduras de celular, notebook ou tablet e mostrar um design em produtos como camisetas, caixas ou cartões de visita. Defina primeiro onde a imagem será usada: página da loja, site de apresentação, redes sociais ou apresentação ao cliente pedem tamanhos diferentes.
Bom saber: As condições de uso gratuito variam conforme a ferramenta e o plano. Quando um cartão não mostra um limite específico da ferramenta, confira cotas, marcas d’água e condições de exportação na página oficial.
O Mockuuups Studio é um editor de mockups em que você solta seu design sobre milhares de mockups de dispositivos e de impressão; está disponível no navegador, como aplicativo para desktop e por meio de plugins para Figma, Sketch, Penpot e Adobe Express.
Criar mockups
O Placeit é a ferramenta de design baseada na web da Envato que oferece mockups para vestuário, dispositivos digitais, impressão e produtos de impressão sob demanda, além de um criador de logotipos, modelos de design e ferramentas de vídeo; os downloads ilimitados vêm com uma assinatura.
Criar mockups
O Rotato é um gerador de mockups que coloca seu próprio design de aplicativo ou de site nas telas de mais de 30 dispositivos 3D prontos e o transforma em um vídeo animado ou em uma imagem; ele tem um aplicativo para macOS e uma versão web em beta público.
Criar mockups
Bom saber: Exige instalação no computador.
O Shots.so é um aplicativo de mockups baseado na web que transforma capturas de tela de produtos em imagens de apresentação ou vídeos curtos, com molduras de dispositivo, fundos e movimento animado.
Criar mockups
Envie sua própria captura ou arte e veja o resultado em tamanho real: confira se o texto continua nítido dentro da moldura e se cantos e reflexos parecem naturais. Exporte a mesma cena em alguns tamanhos e veja qual fica mais nítida.
Em modelos de mockup prontos, leia na página da licença as condições de uso comercial, atribuição e revenda, e confirme na página oficial se a exportação gratuita tem marca d’água ou limite de resolução. Alguns modelos exigem um programa de computador à parte, como o Photoshop; outros funcionam no navegador.
Posso usar mockups nas capturas da loja de aplicativos? As lojas definem tamanhos e regras de conteúdo para capturas; confira as diretrizes atuais para saber até que ponto aceitam moldura de aparelho, texto ou fundo.
Mockup é o mesmo que protótipo de interface? Não. O mockup apresenta um design pronto em uma cena realista; o protótipo serve para testar um fluxo clicável entre telas. Se quiser testar um fluxo, veja as ferramentas de design de interfaces e protótipos.
Esta comparação usa documentação oficial publicada. Não é um teste prático nem uma classificação de qualidade. Recursos desconhecidos não são considerados verificados.
| Nome do app | Onde vai usar? | Resultado grátis | Sem cadastro | Sem marca-d’água | Funciona offline | Processamento em lote | Idioma do conteúdo | Bom saber / Fontes e data da verificação |
|---|---|---|---|---|---|---|---|---|
| Mockuuups Studio | Site | Sim | Não verificado | Não verificado | Não verificado | Não verificado | Não verificado | Fontes e data da verificação |
| Placeit | Site | Não verificado | Não verificado | Não verificado | Não verificado | Não verificado | Não verificado | Fontes e data da verificação |
| Rotato | Computador | Não verificado | Não verificado | Não verificado | Não verificado | Não verificado | Não verificado | Exige instalação no computador. Fontes e data da verificação |
| Shots.so | Site | Não verificado | Não verificado | Não verificado | Não verificado | Não verificado | Não verificado |