O email de marketing mediano recebe clique de 6.81% das pessoas que o abrem (MailerLite). Ou seja: de cada 100 leitores interessados o bastante para abrir, 93 rolam a tela, passam o olho e fecham.
A maioria desses emails é parecida: um hero de banco de imagens, um botão “Compre agora” centralizado, um footer copiado da última campanha. Nada está quebrado, mas também nada merece um toque.
Este guia mostra como fazer seu email se destacar de verdade com boas práticas de design de email. Vamos bloco a bloco, do hero ao footer, por tudo que leva ao clique. E com a Black Friday chegando em novembro, é a hora certa de revisar o template antes que a caixa de entrada do seu cliente fique lotada de ofertas iguais.
Por que a maioria dos emails parece igual
Passe por qualquer galeria de inspiração de design de email e você vai ver que os melhores exemplos têm 1 coisa em comum: cada bloco foi pensado para aquele email específico. A maior parte do tráfego na caixa de entrada funciona ao contrário, por 3 motivos.
- HTML de email é difícil de montar. Email ainda roda em layouts de tabela e estilos inline, e um design que fica certo no Gmail pode desmontar no Outlook. Qualquer coisa além do template padrão exige um dev e uma rodada de testes. A maioria dos times pega o layout pronto, troca o logo e dispara.
- Visuais de banco de imagens. A imagem do hero é escolhida para servir a qualquer campanha, ou seja, não serve a nenhuma. É a primeira coisa que o leitor vê, e ela não diz nada sobre a oferta.
- Sem design system. Não existe um lugar único para cores, fontes e footer da marca, então cada campanha é estilizada na mão. Alguns meses depois, não há 2 emails com a mesma cara.
O custo desses erros aparece depois da abertura. O assunto fez o trabalho dele, e o leitor abriu o email. Aí ele fechou sem clicar, porque o email parecia com todos os outros da caixa de entrada e nada chamou a atenção.
Como fazer seu email se destacar de verdade?
A resposta curta: design melhor. A longa: ajustar cada bloco do email para que ele pareça relevante e pessoal para o leitor e dê a ele um motivo real para clicar e fazer o que você precisa, seja comprar, reservar ou voltar ao app.
E não, isso não significa que um dev ou designer precisa reescrever HTML a cada email.
Agora vamos bloco a bloco: como melhorar cada parte do email para conseguir mais cliques.
Boas práticas de design de email, bloco a bloco
Este é o email que vamos desmontar: uma promoção de outono de um app de artigos de corrida, 48 horas, 25% off em tênis de trilha, montado no editor drag-and-drop do Pushwoosh. Troque o tênis pelo seu produto e o outono pelo esquenta da Black Friday, e a estrutura é a mesma.
O email se divide em 5 blocos. Veja o que faz cada um se destacar e o que ele muda para o leitor.
| Bloco | Como se destacar | Efeito |
|---|---|---|
| Header | Um header compacto sobre 1 sistema de marca: Brand book com Derive brand, salvo como bloco sincronizado | Reconhecimento imediato, a mesma cara em todo email |
| Hero | Um visual criado em torno da oferta com Generate with AI, com o título como texto ao vivo | O leitor entende a oferta no primeiro olhar |
| Texto e CTA | Um título escrito para 1 leitor com merge tags e Liquid, e 1 botão estilizado em texto ao vivo | Relevância e 1 próximo passo claro |
| Conteúdo | Grids de produtos do catálogo ao vivo, seções por público com condições de exibição, contagem regressiva com o Timer block | Mais cliques em produtos, a oferta certa para cada leitor, urgência para agir agora |
| Footer | 1 footer salvo como bloco sincronizado, verificado pelo Smart check | Informações legais corretas em todo email |
A seguir, abrimos cada bloco pelas suas práticas, do topo ao fim do email: por que cada prática funciona e como aplicá-la no Pushwoosh.
Topo do email: header e hero
#1. Monte o header sobre o seu sistema de marca
Por que funciona: O header abre todo email. Quando logo, cores e fontes são sempre os mesmos, o leitor reconhece o remetente num relance, e cada bloco abaixo herda o mesmo visual.
Em vez de: cores copiadas do último email e um layout de header novo a cada campanha → tente: 1 sistema de marca e um header compacto (logo mais 2 ou 3 links), idêntico em todo email.
No Pushwoosh: Configure o Brand book: logo, cores, fontes, padrões de bloco e tom de voz da marca. Você não precisa preencher na mão: o Derive brand analisa o seu site, um PDF de brandbook ou o seu logo e sugere paleta, fontes e tom. O Apply brand book styles repinta qualquer template, inclusive os antigos, sem mexer no conteúdo.
Depois, monte o header com o seu logo e um Menu block e salve como bloco reutilizável com o Keep copies in sync ativado: um link novo no menu aparece em todos os emails de uma vez. O footer funciona do mesmo jeito (veja a prática 8).
#2. Monte o hero em torno da oferta, não de uma foto de banco de imagens
Por que funciona: O hero é o que o leitor vê antes de decidir se vai rolar a tela. Se ele mostra a oferta, o leitor entende a mensagem em 1 olhar.
Em vez de: um corredor sorridente de banco de imagens → tente: os próprios tênis de trilha em promoção, com “25% off em tênis de trilha. Só por 48 horas.” em texto ao vivo por cima.
No Pushwoosh: No Image block, o Generate with AI cria o visual a partir de um prompt (“tênis de trilha numa trilha de mata molhada, luz quente de fim de tarde”) em proporção de banner 16:9. Coloque a imagem como fundo de um Card block, e o título e o botão continuam em texto ao vivo: eles aparecem mesmo quando as imagens estão bloqueadas, e leitores de tela conseguem lê-los.
O corpo: texto, CTA e conteúdo
#3. Escreva um título personalizado para cada leitor
Por que funciona: Um título que cita algo que o leitor reconhece (o nome dele, o número que ele calça, a categoria que ele navegou) soa como uma mensagem para ele, não como um disparo em massa.
Em vez de: “Conheça nossa coleção de outono” → tente: “Ana, o seu número de tênis de trilha voltou ao estoque.”
No Pushwoosh: Insira o nome como merge tag pela barra de ferramentas do Heading block e defina um valor padrão, como “Corredor”, para quem não tem nome cadastrado. Para uma frase diferente por idioma ou país, use templates Liquid.
#4. Dê a cada email 1 CTA que se destaque de verdade
Por que funciona: Cada botão a mais divide a atenção. 1 CTA principal numa cor de contraste diz ao leitor o que fazer em seguida, e no celular ele precisa de uma área de toque de pelo menos 44×44 pt, segundo as Human Interface Guidelines da Apple.
Em vez de: 3 botões iguais (“Compre agora”, “Saiba mais”, “Ver tudo”), ou um botão embutido numa imagem → tente: 1 botão em texto ao vivo, “Achar meu número”, na sua cor de destaque.
No Pushwoosh: Estilize o Button block com fundo sólido ou em gradiente, cantos arredondados e padding, e defina um padding maior no mobile para o botão continuar do tamanho do polegar.
#5. Preencha os grids de produtos com dados ao vivo
Por que funciona: Itens esgotados e preços desatualizados custam cliques e confiança. Na Black Friday, quando o estoque gira em horas, isso pesa ainda mais.
Em vez de: 6 tênis copiados no template na segunda-feira, 2 deles esgotados na quinta → tente: um grid de tênis de trilha baseado no que cada leitor viu, puxado do catálogo ao vivo.
No Pushwoosh: O Products block preenche os itens por regra de catálogo, a partir do carrinho abandonado do destinatário ou com uma estratégia de recomendação como mais vendidos, de volta ao estoque ou baseada no que ele viu. O feed do seu Product catalog sincroniza a cada hora, então preços e estoque ficam atualizados sem ninguém editar o email.
Para apps de mídia e conteúdo, o News block faz o mesmo com artigos dos seus feeds, com introduções escritas por IA abaixo de cada título.
#6. Dê a cada público a sua própria seção
Por que funciona: Um cliente fiel e um cliente que não compra há 3 meses precisam de motivos diferentes para clicar.
Em vez de: o mesmo discurso de “nova coleção” para todo mundo → tente: 1 seção com 3 variantes: acesso antecipado para membros do programa de fidelidade, 25% off para quem está inativo há 90+ dias e lançamentos para todos os outros.
No Pushwoosh: Adicione uma condição de exibição a cada variante, com base em Tags ou numa expressão Liquid, e encadeie com IF / ELSE IF / ELSE. 1 campanha para montar e testar, 3 emails diferentes na caixa de entrada.
#7. Torne a urgência concreta com uma contagem regressiva
Por que funciona: “Em breve” é abstrato. Um prazo visível transforma o “talvez depois” numa decisão que o leitor precisa tomar agora.
Em vez de: “A promoção está acabando!” no assunto, no título e no botão → tente: uma contagem regressiva até o fim real da promoção de 48 horas, logo ao lado do CTA.
No Pushwoosh: Arraste o Timer block, defina data, hora e fuso horário de término (por exemplo, o horário de Brasília) e estilize os dígitos nas cores da marca. A oferta é resgatada na loja física? O Barcode block gera um código escaneável para cada destinatário. No Brasil, onde o PIX transformou escanear QR code num hábito do dia a dia, o cliente já chega ao caixa sabendo o que fazer.
O fim: footer
#8. Monte o footer uma vez e mantenha-o sincronizado em todos os emails
Por que funciona: O footer carrega o link de descadastro, o endereço postal e o texto legal. Ele precisa estar certo em todo email.
Em vez de: um footer copiado e colado de campanha em campanha até existirem 2 versões do texto legal → tente: 1 footer, atualizado em 1 lugar.
No Pushwoosh: Monte 1 footer nos estilos da marca, com link de descadastro, endereço postal e links das redes sociais, e salve como bloco reutilizável com o Keep copies in sync ativado. Edite o endereço uma vez, e todo email que usa esse footer é atualizado, inclusive os que já estão agendados.
Dica: o Smart check sinaliza um email de marketing sem endereço postal no footer e avisa quando o email passa do limite de corte do Gmail, de ~102 KB, em que o footer é a primeira coisa a ser cortada.
Acelere o design de email com ferramentas de IA
Um email que se destaca não precisa levar uma semana. Estas ferramentas de IA (detalhe: disponíveis para todo usuário do Pushwoosh) cortam o tempo de produção e ajudam a melhorar o design.
Assistente de IA
Descreva o email na AI tab, e o assistente monta um email completo para você.
Imagens e texto alternativo com IA
O Generate with AI cria um visual a partir de um prompt de texto, direto no Image block. O Generate alt with AI escreve o texto alternativo a partir da própria imagem.
Assuntos e preheaders com IA
Com o conteúdo pronto, 1 clique gera um rascunho de assunto e preheader a partir do que está de fato no email.
Tradução automática
As versões em outros idiomas que faltam são preenchidas pela IA, em vez de digitar cada idioma na mão.
Brand book e blocos sincronizados
Estilos, header e footer das práticas 1 e 8 fazem com que ninguém precise remontar o básico a cada campanha nova.
Monte seu 1º email que se destaca
-
Comece por um template ou por um prompt.
Um layout da biblioteca de templates de email, ou um primeiro rascunho do assistente de IA.
-
Aplique o seu brand book.
Estilos da marca e um header sincronizado: prática 1.
-
Percorra o email de cima a baixo.
Hero, título, CTA, produtos, seções por público, contagem regressiva, footer.
-
Desenhe a versão mobile.
Não deixe o layout de desktop simplesmente encolher no celular. No Brasil, boa parte dos seus leitores abre o email num Android, muitas vezes num aparelho de entrada como Galaxy A ou Moto G. Mude para a visualização mobile, totalmente editável na largura real de um celular, e escolha Stack, Keep row ou Reverse para cada linha do Columns block. Defina tamanhos de fonte, padding e geometria de imagem específicos para o mobile, e use Hide on mobile ou Hide on desktop para blocos que só fazem sentido em 1 tela. É email responsivo sem escrever uma única media query.
-
Teste.
Rode o Smart check e depois envie um email de teste para até 50 endereços.
-
Envie e depois leia o mapa de cliques.
A Click map tab desenha um mapa de calor sobre o preview do email, para você ver quais elementos puxaram cliques e se o hero novo cumpriu o seu papel.
FAQ
Artigos relacionados
Ver todos
