O que é mockup: significado, tipos e como fazer

A palavra aparece em briefing de agência, em vaga de designer, em anúncio de loja de estampas e até no consultório do dentista. Em todos esses lugares ela quer dizer a mesma coisa: uma prévia realista de como algo vai ficar depois de pronto. Abaixo estão o significado de mockup, a diferença para wireframe e protótipo, os tipos mais comuns, para que eles servem, quanto custam e como fazer o seu.

Resposta direta. Mockup é uma simulação realista e estática de um design aplicado. No design de interfaces, é a versão em alta fidelidade de uma tela, entre o wireframe e o protótipo. No design gráfico e de produto, é a arte colocada sobre a foto de um objeto real, como uma estampa numa camiseta ou um logo numa caneca. Nos dois casos, serve para aprovar o visual antes de gastar com produção.

O que é mockup

Mockup é uma prévia realista e estática de um design em uso. O termo vem da indústria e da arquitetura, em que o mock-up era um modelo físico construído para mostrar como um produto, um ambiente ou um veículo ficaria antes da produção em escala. O design pegou a palavra emprestada para o equivalente digital: uma imagem com cara de pronta, usada para revisar e vender uma ideia.

Hoje dois sentidos dominam, e o contexto diz qual é o certo:

• No design de interfaces (UX e web), mockup é a versão estática e em alta fidelidade de uma tela ou página. Ele fica entre o wireframe (estrutura) e o protótipo (interação).
• No design gráfico, de produto e de estampas, mockup é a arte aplicada numa foto ou renderização de um objeto real, como uma estampa numa camiseta ou um rótulo numa embalagem.

Os dois têm o mesmo propósito: deixar as pessoas julgarem o visual antes de investir tempo e dinheiro em programar ou imprimir.

Wireframe, mockup e protótipo: qual a diferença

No design de interfaces, o mockup é uma das três etapas que vão do rascunho ao produto real. Cada uma responde a uma pergunta diferente.

	Wireframe	Mockup	Protótipo
Fidelidade	Baixa	Alta	Alta (ou média)
Mostra	Layout e blocos de conteúdo	Cores, fontes, imagens e espaçamentos finais	Visual final mais cliques e transições
Interação	Estático	Estático	Clicável
Responde	"Onde fica cada coisa?"	"Como vai ficar?"	"Como vai funcionar?"
Uso típico	Planejamento, estrutura	Aprovação visual com cliente	Teste com usuários, entrega para o dev

O wireframe usa caixas cinza e texto provisório para a conversa ficar na estrutura. O mockup traz o design visual de verdade, e é nesse momento que o cliente reage a cor, tipografia e imagens. O protótipo liga esses mockups para quem testa tocar num botão e cair na próxima tela. Muitas equipes pulam ou juntam etapas: um site institucional pequeno pode ir do rascunho direto ao mockup, enquanto um aplicativo complexo passa pelas três várias vezes. Figma, Sketch e Adobe XD são as ferramentas mais usadas para mockups de tela.

Tipos de mockup de produto

Fora do design de interfaces, mockup quase sempre significa mockup de produto. Estes são os tipos que mais aparecem em estamparia, papelaria e marketing:

• Vestuário. Camisetas, moletons, ecobags e bonés, com a estampa seguindo as dobras do tecido. A base das lojas de estampas sob demanda.
• Canecas e garrafas. Canecas, copos térmicos e squeezes, em que a arte curva em volta de um cilindro.
• Embalagens. Caixas, sachês, rótulos, garrafas e latas, usados em apresentações e pré-vendas antes de produzir o lote.
• Papelaria. Cartões de visita, panfletos, cartazes, papel timbrado e convites mostrados sobre uma mesa ou parede.
• Dispositivos. A tela de um site ou app dentro de um celular, notebook ou tablet, para páginas de lançamento e portfólios.
• Fachadas e sinalização. Letreiros, outdoors, envelopamento de carros e banners, ótimos para mostrar um logo em escala real.
• Mockup 3D. Uma renderização tridimensional do produto ou da embalagem, que pode ser girada e vista de vários ângulos.

Um bom mockup de produto tem três qualidades. A arte acompanha a superfície, dobrando com o tecido da camiseta ou com a curva da caneca. A luz e as sombras da foto ficam por cima da estampa, então ela parece impressa e não colada. E o tamanho da estampa corresponde ao que a gráfica vai produzir, para o cliente receber o que viu.

Para que serve um mockup

Mockups de produto se pagam em cinco situações:

1. Anúncios de loja. Lojas de estampas sob demanda e vendedores de Shopee, Mercado Livre ou Elo7 anunciam peças que só são impressas depois do pedido, então o mockup é a foto do produto.
2. Aprovação do cliente. Um logo aplicado na fachada ou no uniforme é aprovado mais rápido do que o arquivo do logo solto, porque o cliente enxerga o contexto real. Por isso o mockup costuma fechar a apresentação de uma identidade visual.
3. Escolha de cores. A mesma arte em camisetas branca, cinza e preta, lado a lado, mostra qual cor combina antes de comprar estoque.
4. Pré-venda e teste de demanda. Mockups de embalagem e de produtos de marca testam o interesse num post ou numa campanha de financiamento coletivo antes de produzir.
5. Material de marca consistente. Página de lançamento, catálogo e anúncios podem usar o mesmo conjunto de mockups.

Em anúncios de marketplace, use o primeiro mockup para a visão mais clara do produto sobre fundo liso, depois acrescente mockups de uso (a camiseta vestida, a caneca na mesa) e uma tabela de cores. Mostre a estampa no tamanho real: um mockup com estampa exagerada cria a expectativa errada. Uma foto real de uma peça impressa ao lado dos mockups responde melhor à pergunta "como fica de verdade?" do que qualquer cena extra.

Mockup na odontologia

Na odontologia o termo tem um sentido próprio, e por isso aparece tanto nas buscas do Brasil. O mock-up dental é um ensaio do novo sorriso: a partir de um enceramento feito no modelo de gesso, o dentista aplica uma resina provisória sobre os dentes, e o paciente vê formato, tamanho e proporção antes de lentes de contato dental ou facetas. A lógica é a mesma do mockup de design: aprovar o resultado antes da execução definitiva.

Onde pegar mockup e quanto custa

O custo de um mockup depende principalmente de quanto ele precisa ser exclusivo:

• Caminhos gratuitos. Modelos de mockup gratuitos e geradores online resolvem a maior parte das necessidades de camiseta, caneca e anúncio. A contrapartida é que as cenas gratuitas mais populares aparecem em muitas lojas.
• Modelos pagos e assinaturas. Pacotes premium (em geral arquivos PSD em camadas) e assinaturas de geradores trazem mais cenas, modelos e ângulos. O pacote costuma ser compra única; o gerador, cobrança mensal.
• Mockup sob medida. Um fotógrafo ou estúdio fotografa uma amostra real ou cria uma renderização 3D da sua embalagem. É o caminho mais caro e serve para imagens principais, apresentações de embalagem e marcas que precisam de cenas exclusivas.

Para um mockup de interface, o custo é o tempo de design: as horas de um designer transformando o wireframe numa tela em alta fidelidade no Figma ou em outra ferramenta.

Como fazer um mockup de produto com IA no Playyy

O Playyy é um agente de design com IA que tem mockups prontos para aplicar a sua arte em fotos de camisetas, moletons, blusas, canecas e outros produtos. No editor, abra o painel Elements → Mockups, insira a foto da peça e solte o design por cima; clique duas vezes para posicionar a estampa, arraste para mover, puxe um canto para mudar a escala e use a alça de cima para girar. O menu de tamanho de impressão oferece o tamanho recomendado ou o preenchimento da área de impressão, e a página do mockup de camiseta mostra o mesmo fluxo a partir de um upload.

Ao trocar a cor da peça, as dobras, as costuras e as sombras continuam realistas enquanto a estampa fica exatamente como foi desenhada; é assim que o gerador de mockup de moletom monta versões bege, grafite e marinho a partir de um único posicionamento. Você também pode pedir ao agente no chat para colocar o design numa caneca ou numa ecobag, ou enviar a foto do seu próprio produto: o agente detecta as superfícies que podem receber impressão (faces planas, cilindros em pé como canecas e frentes de roupa viradas para a câmera) e aplica a arte nelas, que continua editável.

Para uma coleção inteira, coloque várias peças numa página e exporte tudo junto. O gerador de mockups de roupas cobre esse conjunto, com downloads em PNG ou JPG reunidos num ZIP para os anúncios e PDF para provas. Se a arte ainda está com fundo, use antes a ferramenta de remover fundo para a estampa entrar limpa. O Playyy é grátis para começar, com créditos bônus diários que se renovam todo dia.

Mockup é a ponte entre a ideia e o produto pronto: uma tela em alta fidelidade para aprovar o visual de um site ou a sua arte aplicada num objeto real para vender antes de imprimir. Escolha o tipo que responde à pergunta do momento, mostre a estampa no tamanho real e use os mockups para decidir cores, fechar aprovações e montar anúncios com cara de marca.