4 Erros de Design em E-mail

Se você trabalha com marketing ou produto, provavelmente já ouviu (ou até falou) algo assim:

É nessas horas que nascem as gambiarras de design: atalhos que parecem salvar tempo, mas que, na prática, derrubam aberturas, cliques, faturamento… e ainda pioram a experiência de quem recebe.

Esse post é inspirado no artigo 4 Email Design Shortcuts That Kill Performance and What to Do Instead, escrito por Tylor Loposser. Ele lista 4 atalhos de design em email que parecem “inofensivos”, mas que prejudicam a performance. Aqui eu vou traduzir essas ideias pro nosso contexto brasileiro, com exemplos práticos e recomendações diretas.

1. O e-mail "somente imagem"

A gambiarra

Pra ganhar tempo, o time de criação faz assim: em vez de montar um email em HTML com texto + botões + imagens, joga tudo numa grande imagem, como se fosse um folder impresso.

Visualmente fica bonito, rápido de produzir e fácil de aprovar.

Só tem um problema: não funciona bem para e-mail.

Por que isso derruba sua performance?

• Se a imagem não carrega (internet ruim, bloqueio de imagens, política de segurança da empresa), a pessoa vê um retângulo vazio. Zero mensagem, zero clique.

• Leitores de tela (usados por pessoas com deficiência visual) não conseguem ler nada, porque o conteúdo está “escondido” dentro da imagem.

• Gmail, Apple Mail e outros provedores estão trazendo resumos por IA do email. Se o texto está dentro da imagem, a IA pode ter dificuldades para extrair o conteúdo direito.

• No dark mode, o fundo fica escuro, mas a sua imagem pode não acompanhar. Resultado: contraste ruim, texto difícil de ler.

Um exemplo prático

Uma loja de moda faz um e-mail de Black Friday com tudo em uma única imagem: título, prazo da promoção, desconto, botão, etc.

Para uma parte da base:

• o e-mail abre com a imagem bloqueada;

• a pessoa não vê a oferta, não entende o que é;

• fecha o e-mail e segue a vida → venda perdida.

O que fazer em vez disso

• Use HTML para texto: títulos, subtítulos e descrições devem ser texto de verdade, não texto dentro da imagem.

• Use imagem para o que ela faz melhor: foto do produto, ilustração, elemento visual de apoio, etc.

• Busque uma proporção saudável de imagens e texto; o autor recomenda 60% de imagens / 40% texto em HTML.

• Se for usar uma fonte diferente, estilizada, sempre defina alternativas (ex.: MinhaFonte, Arial, sans-serif).

2. Ignorar o alt text das imagens

A gambiarra

Você sobe a imagem, define o link, ajusta o tamanho… e pula aquela caixinha de "texto alternativo" (alt text), porque "ninguém vê isso mesmo".

Só que não é bem assim...

O que é alt text e por que ele importa

O alt text é o texto que:

• aparece no lugar da imagem quando ela não carrega;

• é lido pelos leitores de tela para pessoas com deficiência visual;

• aparece quando passamos o mouse em cima da imagem; (quem aparece quando passamos o mouse em cima da imagem é o atributo “title”)

• ajuda a dar contexto para o que está acontecendo naquele espaço do email.

Quando você não preenche o alt text:

• se a imagem não carregar, fica um buraco sem sentido;

• quem usa leitor de tela ouve algo como "imagem, imagem, imagem” e não entende nada;

• se a imagem tiver link, a pessoa não sabe no que está clicando.

Nem toda imagem precisa de alt text

Tem casos em que você pode e deve deixar o alt em branco (alt=""):

• imagem puramente decorativa (um fundo, um grafismo);

• foto de produto que já está descrita no texto ao lado;

• mapas ou gráficos super complexos, onde o texto ao redor já explica melhor;

• conjunto de imagens em que uma delas já descreve o todo.

Nesses casos, um alt vazio ajuda o leitor de tela a não perder tempo com algo que não adiciona informação.

Onde o alt text é obrigatório na prática

Aqui é onde a maioria das marcas erra:

• Banners com texto importante: se a arte diz "30% OFF só hoje”, o alt precisa dizer isso também.

• Imagens informativas: infográficos, passo a passo, cards com instruções.

• Conteúdo dinâmico: recomendações personalizadas de produto, contagem regressiva, previsão de clima, score de alguma coisa.

• Imagens que são link: o alt deve dizer o que vai acontecer:

  • “Curso X – inscreva-se agora”

  • "Tênis Y – ver detalhes”

Um exemplo prático

Um marketplace de ferramentas manda um email só com cards de produtos em imagem, cada card é clicável, mas os alts são "image_01", "image_02”.

Pra quem depende de leitor de tela, o email é:

Ou seja: inutilizável.

Como corrigir

• Crie uma regra interna:

  • Nenhuma imagem com informação importante sai sem alt text.

• Pense no alt como um mini roteiro:

  • Se as imagens sumissem, os alt text ajudariam a pessoa a entender a oferta?

3. Tratar cor como se fosse só branding

A gambiarra

Você pega a paleta oficial da marca e aplica direto:

• texto cinza clarinho em fundo branco;

• botão azul em cima de fundo azul;

• texto colorido em cima de foto.

Fica lindo no layout no Figma, mas…

O problema real: legibilidade e acessibilidade

• No celular na rua, num dia de sol, grande parte desse texto fica simplesmente ilegível.

• Pessoas com baixa visão ou algum tipo de daltonismo (eu, rs) podem nem perceber que ali tem um botão ou link.

• Se você depende só da cor pra indicar ação (tipo: link é azul, texto normal é preto), uma parte da sua audiência vai ficar perdida.

O que é "bom contraste" na prática

Sem entrar demais na norma técnica: bom contraste é quando texto e fundo se separam bem.

Você bate o olho e consegue ler sem esforço.

Você pode testar isso:

• imprimindo em preto e branco (se o botão "some”, o contraste era fraco);

• apertando os olhos, afastando a tela → se o botão continua visível, está melhor;

• usando ferramentas de checagem de contraste (existem várias gratuitas, como: WebAIM, Adobe Color e Coolors Contrast Checker).

Dicas práticas

• Use cores fortes e contrastantes para texto e CTA.

• Não confie só na cor pra diferenciar link/botão:

  • sublinhe links,

  • use ícones de seta,

  • use borda e formato diferentes nos botões.

• Teste em modo claro e escuro, em computador e celular.

4. Entupir o email de texto (tipografia sofrida)

A gambiarra

Esse é clássico: alguém escreve um textão, copia do Google Docs e cola no editor do email.

Resultado:

• fonte pequena,

• blocos imensos, verdadeiros "tijolões” de texto,

• linhas longas,

• pouco espaço entre parágrafos.

A sensação é de estar lendo um documento de trabalho, não um email de marca.

A dura realidade: ninguém quer ler isso

Com o aumento do consumo audiovisual, a verdade é que a maioria das pessoas não lê o email inteiro. Elas:

• escaneiam,

• param em títulos,

• olham bullets e palavras em destaque,

• talvez leiam 1 ou 2 blocos de texto que chamarem atenção.

Se o seu email é um bloco único de texto:

• fica mais difícil encontrar o que importa;

• a pessoa cansa mais rápido;

• a chance de clicar em alguma coisa diminui.

Boas práticas simples de tipografia para email

Você não precisa virar designer pra acertar o básico:

• Largura do email: 600–640 px é um padrão que funciona bem.

• Layout: 1 coluna é mais seguro, principalmente no celular; grids com 2–4 colunas só pra blocos bem específicos (produtos, por exemplo).

• Tamanho de fonte do corpo: pelo menos 16 px.

• Títulos bem maiores e mais pesados (H1, H2) pra criar hierarquia visual.

• Linhas curtas: algo como 8–12 palavras por linha é mais confortável.

• Altura de linha generosa (1,3x o tamanho da fonte, aproximadamente).

• Alinhamento: textos longos alinhados à esquerda; evitar blocão centralizado.

• Evite escrever tudo em CAIXA ALTA: é mais difícil de ler e pode confundir leitores de tela (que podem ler letra por letra).

Modelo mental: pirâmide invertida

Pense no seu e-mail como uma pirâmide invertida:

1. Em cima: a mensagem mais importante para quem lê o e-mail.

2. Depois: detalhes, explicação, contexto.

3. Por fim: informações complementares, rodapé, etc.

Isso casa muito bem com a forma como as pessoas leem: elas decidem rápido se vão continuar rolando ou não.

Ok, mas como eu ganho velocidade sem gambiarra?

Você pode estar pensando:

A resposta do artigo de Tylor faz muito sentido: ao invés de usar atalhos ruins, crie um sistema modular de e-mails.

O que é um sistema modular de e-mail?

Em vez de depender de “templates fechados” (Template da Black Friday, Template de Boas-vindas, Template de Campanha X…), você monta uma biblioteca de blocos prontos, por exemplo:

• bloco de hero (cabeçalho principal com título + CTA);

• bloco de lista de produtos (2–4 cards);

• bloco de depoimento de cliente;

• bloco de benefícios;

• bloco de FAQ;

• bloco de fechamento com CTA;

• bloco de assinatura do time/fundador.

Cada bloco já vem:

• com tipografia testada,

• contraste ok,

• espaçamento bom,

• alt text pensado,

• versão responsiva pronta.

Na hora de criar um email, você só combina os blocos de acordo com o objetivo da campanha.

Por que isso é tão poderoso

• Você ganha velocidade sem sacrificar qualidade.

• Fica mais fácil fazer teste A/B: trocar um bloco, testar outro hero, mudar CTA.

• Manter consistência visual em toda a jornada (onboarding, promo, transacional) fica mais simples.

• Se você mudar algo (tipo a cor do botão), ajusta no bloco e isso se propaga pra tudo que usar aquele módulo dali em diante.

Um exemplo prático

Pensa numa edtech que vende cursos online:

• Blocos que ela pode criar: "Nova turma", "O que você vai aprender", "Depoimento de aluno", "Garantia", "Botão de matrícula", e assim por diante.

• Com 6–8 blocos bem feitos, ela monta dezenas de e-mails diferentes só rearranjando essas peças.

Checklist final: o que você pode fazer esta semana

Se você chegou até aqui, aqui vai um plano bem direto pra aplicar:

1. Escolha 1 ou 2 e-mails importantes da sua operação (onboarding, carrinho abandonado, oferta principal, etc.).

2. Revise:

   • Tem e-mail 100% imagem? Transforme os textos principais em HTML.

   • Tem imagem com informação importante sem alt text? Escreva um alt text apropriado.

   • Os botões têm bom contraste com o fundo? Ajuste cores se necessário.

   • A fonte tem no mínimo 16 px?

   • Quebre blocos em parágrafos menores e adicione subtítulos.

3. Comece uma mini biblioteca de blocos:

   • Salve como modelos: hero, bloco de 3 produtos, depoimento, CTA final.

   • Use esses blocos nos próximos e-mails em vez de começar do zero toda vez.

4. Meça antes e depois:

   • Compare taxa de clique, descadastro, reclamação de spam e, principalmente, faturamento por envio.

Se você manda e-mail com frequência, pequenos ajustes de design podem fazer uma diferença enorme na receita, sem precisar mudar oferta, mídia ou ferramenta de disparo.

Se você estiver enfrentando problemas de entregabilidade de e-mail, fico à disposição para ajudar. É só entrar em contato: fabricio @ arena . tec . br

Se preferir fazer por conta própria, minha primeira recomendação é você focar suas campanhas nos assinantes mais engajados. Uma vez recuperada a entregabilidade, expanda para os assinantes menos engajados, pouco a pouco.

Se desejar acelerar o processo, recomendo a ferramenta InboxAlly, a mais eficaz que conheço e a que uso em meus projetos.

Até a próxima,
Fabrício

Isenção de responsabilidade: alguns links aqui são afiliados. Você paga o mesmo preço, mas eu posso ganhar uma pequena comissão. Assim consigo continuar testando e indicando apenas o que eu realmente confio e uso no meu dia a dia.