Mockup: o que é, para que serve e como fazer um passo a passo
Como ver, mostrar e corrigir um design antes de produzi-lo, seja um site, um produto ou a sua próxima newsletter
Um mockup é uma representação visual realista de como um design vai ficar antes de ser produzido: um site, um app, uma embalagem, uma camiseta ou um email. Mostra cores, tipografias, imagens e textos, mas ainda não funciona.
Serve para ver o resultado, mostrá-lo e corrigi-lo enquanto mudar algo ainda custa pouco.
O que significa mockup?
Em inglês, mock-up é uma maquete ou um modelo em escala. Em design, traduz-se como maquete ou esboço visual, embora em português quase sempre se use a palavra original.
Essa maquete responde a uma pergunta: “como isso vai ficar quando estiver pronto?”.
Para que serve um mockup?
Para decidir antes de produzir. É mais barato mudar uma cor em um design do que reimprimir mil caixas ou reprogramar um site.
Para apresentar uma ideia. O cliente ou a equipe veem algo parecido com o resultado final, e não uma descrição.
Para detectar erros. Textos que não cabem, contrastes fracos ou elementos que se perdem.
Para vender antes de fabricar. Muitas lojas mostram o produto com uma maquete enquanto preparam a produção.
Para coordenar a equipe. Design, desenvolvimento e marketing trabalham sobre a mesma referência.
Mockup, wireframe e protótipo: diferenças
| Wireframe | Mockup | Protótipo | |
|---|---|---|---|
| O que é | Esquema da estrutura | Design visual estático | Versão interativa |
| Nível de detalhe | Baixo: caixas e linhas | Alto: cores, fontes, imagens | Alto e com navegação |
| Dá para usar? | Não | Não | Sim, de forma simulada |
| Para que serve | Organizar o conteúdo | Ver como vai ficar | Testar como se usa |
| Momento | No início | Depois do wireframe | Antes de desenvolver |
O normal é passar pelas três fases: primeiro a estrutura, depois a aparência e, por fim, a interação.
Tipos de mockup
Web. As páginas de um site com o design final: cabeçalho, menu, textos, imagens e botões.
App. As telas de um aplicativo para celular ou tablet, muitas vezes dentro da imagem de um telefone.
Produto. O design aplicado sobre um objeto: camisetas, canecas, caixas, garrafas ou sacolas.
Branding. O logotipo e a identidade de uma marca em cartões, papelaria, letreiros ou uniformes.
Publicidade. Cartazes, outdoors, anúncios em redes sociais ou na imprensa tal como ficariam no lugar onde vão ser exibidos.
Email. Uma newsletter ou um email comercial antes de enviá-lo, na versão para computador e para celular.
Como fazer um mockup em 6 passos
1. Defina o objetivo. O que você quer mostrar e para quem: um cliente, a sua equipe ou os seus compradores.
2. Parta de um wireframe ou de um esboço. Organize primeiro o conteúdo e depois decida a aparência.
3. Aplique a identidade visual. Cores, tipografia, logotipo e imagens da sua marca.
4. Use conteúdo real. Textos e imagens definitivos, ou o mais parecidos possível. O texto de preenchimento esconde problemas de espaço.
5. Mostre-o em contexto. Um site dentro de uma tela, uma embalagem em uma prateleira, um email em um celular.
6. Peça opiniões e corrija. Mostre-o a quem precisa aprová-lo e a alguém que represente o seu cliente.
Crie seus emails sem código
Escolha um template no Mailrelay, adapte-o à sua marca com o editor de arrastar e soltar e envie um teste para você.
Ferramentas para criar mockups
| Ferramenta | Em que se destaca | Preço |
|---|---|---|
| Figma | Design de sites e apps, trabalho em equipe | Plano gratuito e planos pagos |
| Penpot | Alternativa de código aberto ao Figma | Grátis |
| Balsamiq | Wireframes e maquetes rápidas de baixa fidelidade | Pago, com teste |
| Canva | Maquetes de produto e redes sociais com templates | Plano gratuito e planos pagos |
| Photoshop | Maquetes de produto realistas com camadas | Pago |
Para o design de um produto, muitos templates gratuitos permitem colocar o seu design sobre uma foto com poucos cliques. Verifique sempre a licença antes de usá-los em publicidade.
O mockup no email marketing
Antes de enviar uma campanha, vale a pena vê-la como o assinante vai vê-la:
Crie o design a partir de um template. Os templates de email marketing são, na prática, maquetes prontas para adaptar à sua marca.
Revise a versão mobile. Grande parte dos emails é aberta no celular. Um design responsive evita textos minúsculos e botões impossíveis de tocar.
Verifique como ele aparece em cada programa de email. O email rendering muda de acordo com o cliente de email.
Envie um teste. Mande para você e para um colega antes de enviá-la para toda a lista.
Erros comuns
Pular o wireframe. Se a estrutura não funciona, nenhuma cor a salva.
Usar texto de preenchimento. Depois o texto real não cabe ou desorganiza o design.
Fazer o design só para computador. É no celular que se vê grande parte dos sites e dos emails.
Confundi-lo com o produto final. Ter uma boa aparência não significa que funcione. Teste-o antes de lançá-lo.
Usar templates sem verificar a licença. Alguns só permitem uso pessoal.
Como o Mailrelay ajuda você
O editor do Mailrelay permite que você crie seus emails arrastando blocos sobre templates, confira a pré-visualização e envie um teste para você antes da campanha. Assim você revisa o design completo sem escrever código.
A conta gratuita inclui até 80.000 emails por mês e 20.000 contatos, com suporte humano por chat, ticket e telefone.
Envie suas newsletters com o Mailrelay
Até 80.000 emails por mês e 20.000 contatos grátis, com suporte humano em todos os planos.
Perguntas frequentes
Estas são as dúvidas mais comuns sobre as maquetes visuais.
O que é um mockup, em poucas palavras?
Uma imagem realista de como um design vai ficar antes de ser produzido.
Qual é a diferença entre mockup e wireframe?
O wireframe é um esquema da estrutura, sem cores nem imagens. A maquete mostra a aparência final.
Qual é a diferença entre mockup e protótipo?
O mockup é estático. O protótipo permite clicar e navegar para testar como se usa.
Como se diz mockup em português?
Maquete ou esboço visual, embora em design quase sempre se use o termo em inglês.
Dá para fazer um mockup grátis?
Sim. Ferramentas como Figma, Penpot ou Canva têm planos gratuitos, e há templates de produto sem custo.