Antes de imprimir uma embalagem, montar um site ou aprovar um logótipo com um cliente, há uma pergunta que decide tudo: como é que isto vai ficar quando estiver mesmo a ser usado? É essa pergunta que um mockup responde. Em vez de mostrar um ficheiro plano num ecrã de computador, o mockup coloca o design no seu suporte final, uma garrafa, um telemóvel, uma t-shirt, uma parede, e transforma-o numa imagem que qualquer pessoa entende de imediato.
É por isso que “mockup” é uma das pesquisas mais comuns de quem trabalha com design, seja para descarregar um template, para apresentar um projecto ou simplesmente para entender o termo. Este guia responde às três coisas que essa procura pede: o que é exactamente um mockup, onde encontrar ou como criar um, e em que é que difere de um protótipo ou de um wireframe, três palavras que aparecem sempre juntas e que quase nunca são bem explicadas em português.
O Que É um Mockup (e de Onde Vem o Nome)
Mockup: representação visual realista de um design aplicado ao seu suporte final, seja uma embalagem, um ecrã, uma peça de roupa ou um cartaz, usada para apresentar, validar ou vender uma ideia antes da produção. É estática: mostra o aspecto, não a interacção.
Na prática, um mockup pega num logótipo, num rótulo ou num layout de site e coloca-o dentro de uma fotografia ou ilustração de contexto: a garrafa numa prateleira, a app no ecrã de um telemóvel, o cartaz numa parede de rua. O resultado é uma imagem que qualquer cliente reconhece sem precisar de imaginar sombras, proporções ou onde é que aquilo vai ser visto.
Mockup ou Mock-Up: as Duas Grafias
As duas formas existem e ambas se entendem. Em inglês, “mock-up” com hífen é a grafia mais antiga, ligada ao sentido original de “modelo à escala” usado na engenharia e na indústria desde os anos 1920. No design digital, a forma que se generalizou, em Portugal e no resto do mundo, é “mockup”, tudo junto e sem hífen. É esta última que vai encontrar na esmagadora maioria dos templates, tutoriais e ferramentas, e é a que este artigo usa.
Para Que Serve um Mockup na Prática
Um mockup não é decoração de portefólio. Resolve três problemas concretos de quem trabalha com design ou encomenda design:
- Aprovação mais rápida. Um cliente aprova muito mais depressa uma imagem realista do produto do que um ficheiro vectorial plano. A distância entre “vejo bem a ideia” e “assino já” encurta-se.
- Detecção de erros antes da produção. Um logótipo demasiado pequeno numa embalagem, uma cor que perde contraste num ecrã escuro, um texto que fica cortado numa dobra, tudo isto aparece no mockup e é muito mais barato corrigir aqui do que depois de a tiragem estar impressa.
- Mais conversão em loja online ou proposta comercial. Uma fotografia realista do produto final gera mais confiança do que um desenho técnico, e isso mede-se directamente em vendas ou em propostas fechadas.
Mockup vs Protótipo vs Wireframe: as Diferenças
Estes três termos surgem sempre no mesmo processo de design, mas respondem a perguntas diferentes, e confundi-los é a causa mais comum de expectativas erradas com um cliente que pede “o protótipo” quando na verdade precisa de um mockup, ou vice-versa.
Wireframe: a Estrutura sem Distracções
O wireframe é o esboço mais básico de um layout: caixas, linhas e texto de substituição, normalmente a preto e branco ou em tons de cinzento, sem cor, sem tipografia final e sem imagens reais. Serve para decidir onde fica cada elemento numa página ou num ecrã antes de qualquer decisão visual ser tomada. Ferramentas como o Balsamiq ou o próprio modo de wireframe do Figma são usadas exactamente para isto, para discutir estrutura sem ninguém se distrair com cores.
Mockup: o Aspecto Visual Quase Final
O mockup já tem cor, tipografia definida e imagens reais ou muito próximas do resultado final, mas continua a ser estático: um clique num botão não faz nada, porque a imagem não tem por trás nenhuma lógica de navegação. É a etapa em que se aprova o aspecto antes de investir tempo a programar ou a produzir.
Protótipo: a Simulação da Interacção
O protótipo é clicável. Simula o comportamento real do produto: abrir um menu, deslizar entre ecrãs, submeter um formulário. Ferramentas como o Figma (no modo de prototipagem), o Adobe XD ou o InVision permitem ligar vários écrans e testar o fluxo de navegação com utilizadores reais antes de qualquer linha de código ser escrita.
| Critério | Wireframe | Mockup | Protótipo |
|---|---|---|---|
| Nível de detalhe | Estrutura básica, sem cor | Visual quase final, com cor e tipografia | Visual final e funcional |
| Interactivo? | Não | Não | Sim, clicável |
| Quando se usa | Fase inicial, organização de conteúdo | Aprovação do aspecto com o cliente | Teste de navegação e experiência |
| Ferramentas típicas | Balsamiq, Figma (wireframe) | Photoshop,Placeit,Smartmockups | Figma, Adobe XD, InVision |
Um projecto bem conduzido costuma passar pelos três, nesta ordem: primeiro decide-se onde fica cada coisa (wireframe), depois aprova-se o aspecto (mockup) e só no fim se valida a experiência de uso (protótipo). Saltar directamente para o mockup sem passar pelo wireframe é a razão mais comum de um cliente pedir “mudanças de estrutura” já numa fase avançada e cara do projecto.
Onde Encontrar Mockups Grátis
Para quem só precisa de apresentar uma ideia rapidamente, não é preciso desenhar um mockup do zero. Existem duas vias principais: templates PSD para abrir no Photoshop, ou ferramentas online que geram o mockup no navegador.
Bancos de Templates PSD
Sites como o Freepik, o Mockup World ou o Behance (na secção de recursos gratuitos) disponibilizam milhares de ficheiros PSD organizados por categoria, embalagem, t-shirt, ecrã, cartaz, todos preparados com um objecto inteligente onde basta colar o design. A maioria destes templates é gratuita para uso pessoal, mas convém confirmar sempre a licença antes de usar num projecto comercial, porque nem todos permitem revenda ou uso ilimitado.
Ferramentas Online sem Instalar Nada
Quando não há acesso ao Photoshop, ou quando se quer um resultado rápido, ferramentas como o Placeit, o Smartmockups ou o Canva (na secção de mockups) permitem carregar uma imagem e recebê-la já aplicada a um produto, directamente no navegador. O Placeit e o Smartmockups têm ainda a vantagem de gerar vídeos com o design em movimento, úteis para redes sociais.
Os Limites de um Mockup Grátis
Um mockup grátis resolve um teste rápido ou uma apresentação interna, mas tem um problema estrutural: os mesmos templates circulam por toda a internet e são usados por milhares de outras marcas. Um mockup genérico tende a parecer, bem, genérico. Para uma marca que quer destacar-se, um mockup à medida, ou melhor ainda, o produto real fotografado no contexto certo, é o que separa uma apresentação profissional de uma feita em cinco minutos.
Os Tipos de Mockup Mais Pedidos
Praticamente qualquer suporte pode ser representado em mockup, mas há quatro categorias que concentram a maior parte dos pedidos que uma equipa de design recebe.
Mockup de Site
É a forma mais comum de apresentar um layout antes de o programar: o design do website visto dentro de um portátil, de um tablet ou de um telemóvel, normalmente com os três dispositivos lado a lado para mostrar como o site se comporta em cada ecrã. Serve para aprovar a componente visual de um projecto de web design antes de qualquer linha de código, e é habitualmente o primeiro entregável que um cliente vê num processo de criação de site.
Mockup de Logótipo
Mostrar um logótipo isolado numa folha branca diz muito pouco sobre como ele vai realmente funcionar. O mockup de logótipo aplica-o a suportes reais, papel de carta, fachada, cartão de visita, embalagem, e é a forma mais eficaz de validar se um logótipo aguenta escalas diferentes e fundos diferentes sem perder legibilidade. É também a etapa em que muitas vezes se descobre que uma versão do logótipo precisa de ajuste para fundos escuros ou para tamanhos pequenos, algo que faz parte de qualquer processo sério de identidade visual.
Mockup de Embalagem e de Produto
Nos sectores alimentar, cosmética e retalho, o mockup de embalagem é muitas vezes o único material visual disponível antes de a produção física arrancar. Caixas, sacos, frascos e rótulos são simulados com sombras e reflexos realistas, o que permite decidir sobre cores, tipografia e hierarquia de informação sem gastar uma única impressão de teste. O mockup de produto segue a mesma lógica, aplicado a garrafas, latas ou frascos já prontos para catálogo ou loja online.
Mockup de Camisola e Merchandising
Para marcas de vestuário, eventos ou merchandising, o mockup de camisola (t-shirt mockup) permite ver uma estampa aplicada a uma peça de roupa vestida, com o caimento e as sombras do tecido a fazerem a diferença entre um design que parece plano e um que parece real. É também o tipo de mockup mais usado para validar cores de impressão antes de encomendar uma tiragem a uma tipografia têxtil.
Como Fazer um Mockup Passo a Passo
- Escolha o suporte certo.Defina onde o design vai ser visto na vida real, embalagem, site, camisola, cartaz, porque é esse suporte que determina o template ou ferramenta a procurar.
- Encontre um template adequado.Procure um ficheiro PSD num banco como oFreepik ou oMockup World, ou uma ferramenta online como oPlaceit ou oSmartmockups, verificando sempre a licença de uso.
- Aplique o design através de um objecto inteligente.Nos ficheiros PSD, o “smart object” é uma camada especial onde se cola o design final: ao gravar, a imagem adapta-se automaticamente à perspectiva e às sombras já preparadas no template.
- Ajuste luz, sombra e contexto.É este ajuste fino, mais do que o template em si, que separa um mockup credível de um que parece obviamente montado.
- Exporte na resolução certa para o destino final.PNG ou JPG de alta qualidade para apresentações e redes sociais; um ficheiro com maior resolução se o mockup for usado em impressão.
Trabalhar com Ficheiros PSD e Objectos Inteligentes
A grande maioria dos templates profissionais de mockup vem em formato PSD, o formato nativo do Adobe Photoshop, precisamente por causa dos objectos inteligentes. Um objecto inteligente funciona como uma “janela” dentro do ficheiro: tudo o que for colado ali dentro herda automaticamente a perspectiva, a curvatura e as sombras já desenhadas pelo autor do template. É por isso que um mockup PSD bem feito consegue parecer uma fotografia, mesmo sendo, na prática, uma simples camada de imagem colada sobre outra.
Erros que Tornam um Mockup Pouco Credível
Há três erros que aparecem repetidamente em mockups feitos à pressa:
- Design demasiado nítido sobre um fundo desfocado. Se a fotografia de contexto tem uma leve profundidade de campo e o design fica perfeitamente afiado por cima, o olho detecta a montagem de imediato.
- Ignorar a curvatura da superfície. Uma etiqueta colada direita numa garrafa cilíndrica, sem seguir a curva, é o sinal mais óbvio de um mockup mal feito.
- Cores fora do espaço de cor do destino. Um mockup pensado para ecrã usa RGB; se o mesmo ficheiro for depois usado como referência para impressão em CMYK, as cores acabam sempre mais foscas do que o esperado.
Quando Vale a Pena Pedir Ajuda Profissional
Um mockup grátis chega perfeitamente para um teste interno ou para uma apresentação informal. Mas quando o objectivo é uma proposta comercial, um catálogo de produto ou o lançamento de uma marca, o mockup passa a ser parte da própria comunicação da marca, e um template genérico usado por mais mil outras empresas dilui exactamente o que se está a tentar destacar.
Ferramenta grátisCriador de LogótiposGere ideias de logótipo no navegador e descarregue a que servir de ponto de partida.AbrirNesses casos, o caminho mais eficaz é tratar o mockup como parte do próprio processo de design gráfico, desenhado à medida do produto e da marca, e não como um extra colado no fim. Uma equipa que acompanha o projecto desde o conceito consegue garantir que o mockup mostra exactamente o que o produto final vai ser, sem surpresas entre a aprovação e a produção.
