{"id":81051,"date":"2024-08-07T19:54:27","date_gmt":"2024-08-07T19:54:27","guid":{"rendered":"https:\/\/mailrelay.com\/glossary\/mockup\/"},"modified":"2026-10-07T13:35:17","modified_gmt":"2026-10-07T13:35:17","slug":"mockup","status":"publish","type":"glossary","link":"https:\/\/mailrelay.com\/pt\/glossario\/mockup\/","title":{"rendered":"Mockup"},"content":{"rendered":"\n

Um mockup \u00e9 uma representa\u00e7\u00e3o visual realista de como um design vai ficar antes de ser produzido: um site, um app, uma embalagem, uma camiseta ou um email.<\/strong> Mostra cores, tipografias, imagens e textos, mas ainda n\u00e3o funciona.<\/p>\n\n

Serve para ver o resultado, mostr\u00e1-lo e corrigi-lo enquanto mudar algo ainda custa pouco.<\/p>\n\n

O que significa mockup?<\/h2>\n\n

Em ingl\u00eas, mock-up<\/em> \u00e9 uma maquete ou um modelo em escala. Em design, traduz-se como maquete<\/strong> ou esbo\u00e7o visual<\/strong>, embora em portugu\u00eas quase sempre se use a palavra original.<\/p>\n\n

Essa maquete responde a uma pergunta: \u201ccomo isso vai ficar quando estiver pronto?\u201d.<\/p>\n\n

Para que serve um mockup?<\/h2>\n\n

Para decidir antes de produzir.<\/strong> \u00c9 mais barato mudar uma cor em um design do que reimprimir mil caixas ou reprogramar um site.<\/p>\n\n

Para apresentar uma ideia.<\/strong> O cliente ou a equipe veem algo parecido com o resultado final, e n\u00e3o uma descri\u00e7\u00e3o.<\/p>\n\n

Para detectar erros.<\/strong> Textos que n\u00e3o cabem, contrastes fracos ou elementos que se perdem.<\/p>\n\n

Para vender antes de fabricar.<\/strong> Muitas lojas mostram o produto com uma maquete enquanto preparam a produ\u00e7\u00e3o.<\/p>\n\n

Para coordenar a equipe.<\/strong> Design, desenvolvimento e marketing trabalham sobre a mesma refer\u00eancia.<\/p>\n\n

Mockup, wireframe e prot\u00f3tipo: diferen\u00e7as<\/h2>\n\n
<\/th>Wireframe<\/th>Mockup<\/th>Prot\u00f3tipo<\/th><\/tr><\/thead>
O que \u00e9<\/td>Esquema da estrutura<\/td>Design visual est\u00e1tico<\/td>Vers\u00e3o interativa<\/td><\/tr>
N\u00edvel de detalhe<\/td>Baixo: caixas e linhas<\/td>Alto: cores, fontes, imagens<\/td>Alto e com navega\u00e7\u00e3o<\/td><\/tr>
D\u00e1 para usar?<\/td>N\u00e3o<\/td>N\u00e3o<\/td>Sim, de forma simulada<\/td><\/tr>
Para que serve<\/td>Organizar o conte\u00fado<\/td>Ver como vai ficar<\/td>Testar como se usa<\/td><\/tr>
Momento<\/td>No in\u00edcio<\/td>Depois do wireframe<\/td>Antes de desenvolver<\/td><\/tr><\/tbody><\/table><\/figure>\n\n

O normal \u00e9 passar pelas tr\u00eas fases: primeiro a estrutura, depois a apar\u00eancia e, por fim, a intera\u00e7\u00e3o.<\/p>\n\n

\"Infográfico<\/figure>\n\n

Tipos de mockup<\/h2>\n\n

Web.<\/strong> As p\u00e1ginas de um site com o design final: cabe\u00e7alho, menu, textos, imagens e bot\u00f5es.<\/p>\n\n

App.<\/strong> As telas de um aplicativo para celular ou tablet, muitas vezes dentro da imagem de um telefone.<\/p>\n\n

Produto.<\/strong> O design aplicado sobre um objeto: camisetas, canecas, caixas, garrafas ou sacolas.<\/p>\n\n

Branding.<\/strong> O logotipo<\/a> e a identidade de uma marca em cart\u00f5es, papelaria, letreiros ou uniformes.<\/p>\n\n

Publicidade.<\/strong> Cartazes, outdoors, an\u00fancios em redes sociais ou na imprensa tal como ficariam no lugar onde v\u00e3o ser exibidos.<\/p>\n\n

Email.<\/strong> Uma newsletter ou um email comercial antes de envi\u00e1-lo, na vers\u00e3o para computador e para celular.<\/p>\n\n

Como fazer um mockup em 6 passos<\/h2>\n\n

1. Defina o objetivo.<\/strong> O que voc\u00ea quer mostrar e para quem: um cliente, a sua equipe ou os seus compradores.<\/p>\n\n

2. Parta de um wireframe ou de um esbo\u00e7o.<\/strong> Organize primeiro o conte\u00fado e depois decida a apar\u00eancia.<\/p>\n\n

3. Aplique a identidade visual.<\/strong> Cores, tipografia<\/a>, logotipo e imagens da sua marca.<\/p>\n\n

4. Use conte\u00fado real.<\/strong> Textos e imagens definitivos, ou o mais parecidos poss\u00edvel. O texto de preenchimento esconde problemas de espa\u00e7o.<\/p>\n\n

5. Mostre-o em contexto.<\/strong> Um site dentro de uma tela, uma embalagem em uma prateleira, um email em um celular.<\/p>\n\n

6. Pe\u00e7a opini\u00f5es e corrija.<\/strong> Mostre-o a quem precisa aprov\u00e1-lo e a algu\u00e9m que represente o seu cliente.<\/p>\n\n

\n

Crie seus emails sem c\u00f3digo<\/strong><\/p>\n\n\n\n

Escolha um template no Mailrelay, adapte-o \u00e0 sua marca com o editor de arrastar e soltar e envie um teste para voc\u00ea.<\/p>\n\n\n\n

\n
Criar conta gr\u00e1tis<\/a><\/div>\n<\/div>\n<\/div><\/div>\n\n

Ferramentas para criar mockups<\/h2>\n\n
Ferramenta<\/th>Em que se destaca<\/th>Pre\u00e7o<\/th><\/tr><\/thead>
Figma<\/td>Design de sites e apps, trabalho em equipe<\/td>Plano gratuito e planos pagos<\/td><\/tr>
Penpot<\/td>Alternativa de c\u00f3digo aberto ao Figma<\/td>Gr\u00e1tis<\/td><\/tr>
Balsamiq<\/td>Wireframes e maquetes r\u00e1pidas de baixa fidelidade<\/td>Pago, com teste<\/td><\/tr>
Canva<\/td>Maquetes de produto e redes sociais com templates<\/td>Plano gratuito e planos pagos<\/td><\/tr>
Photoshop<\/td>Maquetes de produto realistas com camadas<\/td>Pago<\/td><\/tr><\/tbody><\/table><\/figure>\n\n

Para o design de um produto, muitos templates gratuitos permitem colocar o seu design sobre uma foto com poucos cliques. Verifique sempre a licen\u00e7a antes de us\u00e1-los em publicidade.<\/p>\n\n

O mockup no email marketing<\/h2>\n\n

Antes de enviar uma campanha, vale a pena v\u00ea-la como o assinante vai v\u00ea-la:<\/p>\n\n

Crie o design a partir de um template.<\/strong> Os templates de email marketing<\/a> s\u00e3o, na pr\u00e1tica, maquetes prontas para adaptar \u00e0 sua marca.<\/p>\n\n

Revise a vers\u00e3o mobile.<\/strong> Grande parte dos emails \u00e9 aberta no celular. Um design responsive<\/a> evita textos min\u00fasculos e bot\u00f5es imposs\u00edveis de tocar.<\/p>\n\n

Verifique como ele aparece em cada programa de email.<\/strong> O email rendering<\/a> muda de acordo com o cliente de email.<\/p>\n\n

Envie um teste.<\/strong> Mande para voc\u00ea e para um colega antes de envi\u00e1-la para toda a lista.<\/p>\n\n

\"Infográfico<\/figure>\n\n

Erros comuns<\/h2>\n\n

Pular o wireframe.<\/strong> Se a estrutura n\u00e3o funciona, nenhuma cor a salva.<\/p>\n\n

Usar texto de preenchimento.<\/strong> Depois o texto real n\u00e3o cabe ou desorganiza o design.<\/p>\n\n

Fazer o design s\u00f3 para computador.<\/strong> \u00c9 no celular que se v\u00ea grande parte dos sites e dos emails.<\/p>\n\n

Confundi-lo com o produto final.<\/strong> Ter uma boa apar\u00eancia n\u00e3o significa que funcione. Teste-o antes de lan\u00e7\u00e1-lo.<\/p>\n\n

Usar templates sem verificar a licen\u00e7a.<\/strong> Alguns s\u00f3 permitem uso pessoal.<\/p>\n\n

Como o Mailrelay ajuda voc\u00ea<\/h2>\n\n

O editor do Mailrelay permite que voc\u00ea crie seus emails arrastando blocos sobre templates, confira a pr\u00e9-visualiza\u00e7\u00e3o e envie um teste para voc\u00ea antes da campanha. Assim voc\u00ea revisa o design completo sem escrever c\u00f3digo.<\/p>\n\n

A conta gratuita inclui at\u00e9 80.000 emails por m\u00eas e 20.000 contatos, com suporte humano por chat, ticket e telefone.<\/p>\n\n

\n

Envie suas newsletters com o Mailrelay<\/strong><\/p>\n\n\n\n

At\u00e9 80.000 emails por m\u00eas e 20.000 contatos gr\u00e1tis, com suporte humano em todos os planos.<\/p>\n\n\n\n

\n
Testar o Mailrelay gr\u00e1tis<\/a><\/div>\n<\/div>\n<\/div><\/div>\n\n

Perguntas frequentes<\/h2>\n\n

Estas s\u00e3o as d\u00favidas mais comuns sobre as maquetes visuais.<\/p>\n\n

O que \u00e9 um mockup, em poucas palavras?<\/h3>\n\n

Uma imagem realista de como um design vai ficar antes de ser produzido.<\/p>\n\n

Qual \u00e9 a diferen\u00e7a entre mockup e wireframe?<\/h3>\n\n

O wireframe \u00e9 um esquema da estrutura, sem cores nem imagens. A maquete mostra a apar\u00eancia final.<\/p>\n\n

Qual \u00e9 a diferen\u00e7a entre mockup e prot\u00f3tipo?<\/h3>\n\n

O mockup \u00e9 est\u00e1tico. O prot\u00f3tipo permite clicar e navegar para testar como se usa.<\/p>\n\n

Como se diz mockup em portugu\u00eas?<\/h3>\n\n

Maquete ou esbo\u00e7o visual, embora em design quase sempre se use o termo em ingl\u00eas.<\/p>\n\n

D\u00e1 para fazer um mockup gr\u00e1tis?<\/h3>\n\n

Sim. Ferramentas como Figma, Penpot ou Canva t\u00eam planos gratuitos, e h\u00e1 templates de produto sem custo.<\/p>\n\n

Artigos relacionados<\/h2>\n\n