15-email-design-best-practices
17 outubro 2024

15 práticas recomendadas de design de e-mail

Crie e-mails profissionais
Índice
  1. 1. Escreva uma linha de assunto poderosa
  2. 2. Crie um pré-cabeçalho de e-mail cativante
  3. 3. Mantenha a marca
  4. 4. Crie seu cabeçalho de e-mail
  5. 5. Adicione anotações de e-mail para a guia promocional do Gmail
  6. 6. Use fontes de e-mail legíveis
  7. 7. Crie banners de e-mail significativos
  8. 8. Adicione GIFs apropriados
  9. 9. Torne os botões de call-to-action visíveis
  10. 10. Atenha-se ao design de e-mail compatível com dispositivos móveis
  11. 11. Seja conciso
  12. 12. Não tenha medo de usar a interatividade nos e-mails
  13. 13. Utilize gamificação em e-mails
  14. 14. Considere a acessibilidade do e-mail
  15. 15. Adicionar um rodapé
  16. Resumindo
1.
1. Escreva uma linha de assunto poderosa

Pense em algumas campanhas de marketing visualmente atraentes. Qual a primeira coisa que vem à sua mente? São os elementos de design ou o conteúdo visual? Que tal GIFs animados? Com tantas coisas a considerar e tão pouca consistência nas regras, como você se mantém na marca? Quais são os principais elementos que você precisa para seus e-mails de marketing? 

Nós queremos ajudar você! Juntos, vamos mergulhar nas melhores práticas para o design de e-mail e discutir dicas para linhas de assunto de e-mail, botões de call-to-action, capacidade de resposta móvel, fontes seguras na web e técnicas para campanhas de e-mail eficazes. Agora, vamos começar, está bem? 

1. Escreva uma linha de assunto poderosa

Por mais assustador que pareça, muitas vezes você tem apenas uma chance de chamar a atenção do cliente em potencial. Os estudos mostram que 47% dos destinatários de e-mail decidem se abrem um e-mail com base apenas na linha de assunto . Além disso, 69% dos destinatários movem ofertas diretamente para a pasta de spam quando as linhas de assunto do e-mail estão desativadas.

Antes de decidir sair do e-mail marketing de uma vez por todas, espere! Temos práticas recomendadas simples, mas funcionais, para o assunto do seu e-mail: 

  • precisão e comprimento das linhas de assunto: de acordo com o EmailToolTester, o melhor comprimento da linha de assunto varia de 30 a 50 símbolos para dispositivos móveis e vai até 100 para desktops. O limite exato depende do cliente de e-mail e das dimensões da tela;

Um exemplo de linha de assunto provocante

(Fonte: E-mail da Zappos)

  • conteúdo dinâmico: o relatório recente afirma que 63,7% dos especialistas usam conteúdo dinâmico para personalizar seus e-mails, incluindo o texto nas linhas de assunto.

Exemplos de linha de assunto de boas-vindas

(Fonte: E-mail da Ryanair e Grammarly)

2. Crie um pré-cabeçalho de e-mail cativante

Um pré-cabeçalho chamativo é uma parte fundamental das melhores práticas de design de e-mail e o ponto final entre um e-mail aberto e um ignorado. Os pré-cabeçalhos são normalmente uma continuação das linhas de assunto do e-mail, portanto, outra chance de despertar a curiosidade do seu público-alvo ou desencadear uma emoção. Por quê?

Um estudo recente concluiu que as necessidades emocionais formaram 86% das decisões relacionadas à compra, portanto, satisfazer uma em seu e-mail de marketing pode ser uma vitória! Se você quer apostar no sentimento de apreciação ou exclusividade, garanta-o com a call to action, e você está pronto para ir. 

Leia com atenção:

  • os destinatários de e-mail podem ver de 30 a 80 caracteres em um dispositivo móvel e até 130 em desktops, dependendo do cliente de e-mail (Gmail ou Apple Mail ou qualquer outro), por isso é melhor mantê-lo curto e responsivo para dispositivos móveis;
  • use caracteres do pré-cabeçalho para adicionar detalhes à linha de assunto e apoiar a ideia da mensagem de e-mail;

Um exemplo do pré-cabeçalho como uma continuação da linha de assunto

(Fonte: E-mail da Tony's Chocolonely)

  • se o pré-cabeçalho não se adequar ao seu estilo, você pode usar algum espaço em branco. Caso contrário, os destinatários de e-mail podem ver o texto alternativo descritivo ou uma oferta para verificar a versão da web.

Como adicionar espaço em branco ao pré-cabeçalho

3. Mantenha a marca

Uma identidade de marca consistente cria confiança para a sua empresa, e é tão simples quanto isso. De acordo com a pesquisa da Emarsys, a lealdade verdadeira e ética a determinadas marcas aumentou 26% e 25%. O que isto significa?

Ultimamente, a importância de uma forte conexão entre a empresa e seu público-alvo tem aumentado.

Manter as narrativas, esquema de cores, fontes e conteúdo visual em todos os canais ajuda os destinatários a reconhecerem a marca.

A equipe da Stripo criou o kit Diretrizes da Marca com os estilos de design de e-mail, logotipos e detalhes de contato para que seus profissionais de marketing por e-mail possam permanecer na marca.

A guia Diretrizes da marca no Editor de modelos de e-mail

4. Crie seu cabeçalho de e-mail

Agora que a linha de assunto e o pré-cabeçalho estão prontos, o design do e-mail é o próximo da fila. Visualmente atraente, informativo e minimalista são os pilares do seu cabeçalho de e-mail.

Quais são os principais elementos visuais a serem incluídos? Vamos descobrir as melhores práticas de design de e-mail juntos:

  • o nome e o logotipo da empresa são essenciais para ajudar os assinantes a diferenciarem seus e-mails de marketing dos de seus concorrentes;
  • menu de navegação é igualmente importante. As melhores práticas sugerem adicionar as principais seções do site, descontos, localizadores de lojas; 
  • uma opção para "Visualizar no navegador" também deve ser incluída. Nem todos os clientes de e-mail processam elementos interativos ou GIFs corretamente, por isso é melhor ter certeza!

Embora o botão de cancelamento de assinatura esteja associado principalmente ao rodapé, alguns preferem adicioná-lo ao cabeçalho, para que você possa ajustar o e-mail como desejar.

Práticas recomendadas para o botão de cancelar assinatura no cabeçalho

(Fonte: E-mail do Spotify)

5. Adicione anotações de e-mail para a guia promocional do Gmail

Tudo vale no amor e na estratégia de e-mail marketing, certo? Bem, as anotações do Gmail são outra ferramenta útil para sua campanha de e-mail. 

Embora muitos profissionais de marketing por e-mail queiram colocar suas campanhas de e-mail na guia Caixa de entrada, a guia Promoções não é a inimiga! 

Ele oferece uma prévia do que está dentro. Imagens e promoções personalizadas estão logo antes dos destinatários de e-mail, então considere isso um teaser.

Exemplo do e-mail na guia Promoções

(Fonte: E-mail da Tiffany & Co)

Você também pode se interessar

gmail-promotions-tab-cover-image

6. Use fontes de e-mail legíveis

Você pode querer experimentar as fontes ao criar e-mails. No entanto, algumas fontes da web (apostamos que você já experimentou as do Google!) são complicadas, pois os provedores de caixa de correio podem não exibi-las corretamente.

Arial, Tahoma, Verdana, Trebuchet, Geórgia e uma conhecida Times New Roman estão entre as principais listas de fontes seguras para a web

Aqui estão mais práticas de design de e-mail:

  • remova Itálico do seu e-mail. É sempre difícil dizer adeus às fontes antigas, mas os itálicos são um "não" quando se trata de acessibilidade;
  • limitar o uso de fontes diferentes a 3. Quanto mais fontes, melhor não é o caso no design do e-mail.

7. Crie banners de e-mail significativos

Pense nos banners como uma boa adição ao seu e-mail e tente não o sobrecarregar. 

Uma boa estratégia de banner envolve o engajamento com o público-alvo por meio de imagens, links ou GIFs da marca que transmitem a ideia da mensagem de e-mail. 

A chave aqui é contar uma história em vez de apenas vender. Banners excessivamente promocionais podem parecer suspeitos, por isso é melhor se ater a contar histórias. 

Um exemplo do banner de Halloween

(Fonte: Modelo Stripo)

Dicas para os banners considerarem:

  • enquanto a maioria opta por imagens com um tamanho padrão de 600-700px em desktops, você pode tentar outras dimensões. Apenas tenha em mente a capacidade de resposta móvel;
  • tente usar carrosséis, vídeos e GIFs;
  • adicione imagens ou colagens personalizadas transparentes para atualizar seu modelo de e-mail.

Você também pode se interessar

Email_Banner_Size_Cover_Image

8. Adicione GIFs apropriados

Que tal apimentar seus e-mails de marketing com GIFs animados? Sem texto estático ou design de e-mail antiquado. 

As melhores práticas sugerem experimentar o conteúdo para encontrar seu estilo. É tão relevante como sempre, mas a bravura vem com complicações. 

Por exemplo, os tempos de carregamento geralmente afetam negativamente o engajamento. Uma solução alternativa? Otimize GIFs, especialmente para usuários móveis.

Regras a serem seguidas ao adicionar imagens animadas por GIF aos e-mails:

  • não adicione mais de 1 GIF na tela. Caso contrário, o e-mail pode desencadear convulsões fotossensíveis;
  • limitar seus GIFs a 2 flashes por segundo;
  • use o texto Alt para tornar seus GIFs acessíveis para leitores de tela, caso eles não sejam carregados ou exibidos corretamente;
  • colocar a imagem mais informativa no primeiro frame. Alguns provedores de caixa de correio podem não renderizar os GIFs corretamente, portanto, os assinantes de e-mail só podem ver o primeiro quadro.

9. Torne os botões de call-to-action visíveis

Os botões de call-to-action (CTA) nunca saem de moda e são uma das principais práticas recomendadas de design de e-mail que ainda geram conversões. Isso motiva o público a verificar seu site ou saber mais sobre seus serviços. Como você faz os botões se destacarem em suas campanhas de e-mail? Vamos dar uma olhada.

  • usar cores contrastantes para separar os botões de CTA do resto do conteúdo escrito e visual;
  • anexar links para encaminhar os destinatários para páginas da web específicas;
  • ajuste o tamanho para garantir que o botão seja clicável em dispositivos desktop e móveis.

Um exemplo do botão de chamada para ação

(Fonte: E-mail do CARiD)

10. Atenha-se ao design de e-mail compatível com dispositivos móveis

Começaremos com algumas estatísticas: de acordo com a Hubspot, 46% das aberturas de e-mail são móveis. Suas campanhas de e-mail marketing têm um design responsivo? Se ainda não, aqui estão algumas dicas ao trabalhar em uma versão móvel do e-mail:

  • usar um layout de uma coluna para otimização. Layout de várias colunas não é a melhor escolha para dispositivos móveis;
  • adicionar fontes maiores. O texto deve ser legível e perceptível sem aumentar o zoom;
  • remova alguns dos elementos de design para liberar espaço e evitar desordem;

Um exemplo de modelos de e-mail com designs compatíveis com dispositivos móveis

(Fonte: Modelo Stripo)

  • estender o botão de call-to-action para todo o comprimento da tela do celular, facilitando o toque.

Agora vamos comparar o design de e-mail para desktops:

Exemplo de modelo de e-mail para desktop

(Fonte: E-mail da Ryanair)

E aqui está o mesmo modelo de e-mail no dispositivo móvel:

Exemplo de modelo de versão móvel

(Fonte: E-mail da Ryanair)

11. Seja conciso

O público moderno prefere designs de e-mail breves, minimalistas e diretos. Embora não haja um tamanho de e-mail definido para todos, tente chegar ao ponto em 10 segundos.

Você gostaria de promover sua postagem recente no blog? Ótimo! Certifique-se de adicionar uma chamada à ação, imagens, um link para a página da web e um bloco de texto com detalhes sobre o que está dentro. 

Você tem algum desconto? Adicione números e condições e proteja-os com um botão de chamada para ação. Evite apresentações longas e coloque as coisas importantes em primeiro lugar.

12. Não tenha medo de usar a interatividade nos e-mails

Elementos interativos podem separar um bom e-mail marketing de um ótimo e-mail marketing. Você pode incorporar enquetes, pesquisas ou questionários nos modelos de e-mail para se envolver ainda mais com o público-alvo.

Exemplo de Avaliação por Estrelas e Pesquisas NPS

(Fonte: E-mail da Stripo)

O teste A/B no formulário interativo incorporado da Stripo obteve 5,2 vezes mais feedback do que um externo. 

É mais provável que as pessoas respondam diretamente no modelo de e-mail, então por que desperdiçar uma chance?

13. Utilize gamificação em e-mails

Os jogos não são mais apenas uma atividade; eles se tornaram uma poderosa ferramenta de e-mail marketing. Mas na dúvida, confira as estatísticas:

  • gamificação aumenta as taxas de conversão em 27% para o setor eletrônico;
  • a taxa de cliques atingiu 11,1% em comparação com 1,1% para e-mails não gamificados.

 Exemplo de Gamificação de E-mail

(Fonte: E-mail da Stripo)

14. Considere a acessibilidade do e-mail

O design de e-mail acessível garante que sua oferta atinja todo o público, incluindo pessoas com deficiência.

Adicionar texto alternativo a imagens, GIFs animados e utilizar layouts compatíveis com leitores de tela é crucial para o marketing por e-mail em 2024.

Você pode conferir algumas das melhores práticas para tornar seu design de e-mail acessível em nossas Diretrizes de acessibilidade de e-mail. No entanto, como um pequeno spoiler: todos os e-mails que você cria com o Stripo são totalmente otimizados.

15. Adicionar um rodapé

O rodapé é o ponto final do seu e-mail, mas ainda é uma excelente oportunidade para se envolver com o público e manter seu e-mail na marca. 

Adicione ícones de redes sociais, links, detalhes de contato e, o mais importante, um link de cancelamento de assinatura. 

Para corresponder à Lei CAN-SPAM e ao RGPD, certifique-se de incluir o seguinte no seu rodapé:

  • um botão de cancelamento de assinatura;
  • uma razão pela qual o destinatário do e-mail recebeu seu e-mail de marketing;
  • endereço físico.

Exemplo do endereço e motivo do envio de e-mail no rodapé

(Fonte: E-mail da Stripo)

Você também pode se interessar

10 Dicas para Páginas de Cancelamento de Assinatura de E-mail Eficazes

Resumindo

O e-mail marketing é um lugar para liberar sua imaginação e experimentar. Embora existam alguns padrões, a criação de campanhas de e-mail marketing exclusivas, responsivas e acessíveis para dispositivos móveis agrega mais valor. 

Tentamos reunir as melhores práticas e estatísticas para que você possa encontrar seus favoritos e criar com confiança seus próprios modelos de e-mail com o Stripo! 

Crie seu primeiro modelo de e-mail com o Stripo!
Este artigo foi útil?
Tell us your thoughts
Obrigado pelo seu feedback!
0 comentários
Tipo
Indústria
Estações
Integração
Editor da Stripo
Simplifique o processo de produção de e-mail.
Plug-in da Stripo
Integre o editor arrastar e soltar da Stripo ao seu aplicativo da web.
Solicite um modelo personalizado
Nossa equipe pode criá-lo e programá-lo para você. Basta preencher o briefing, e entraremos em contato com você em breve.

Editor da Stripo

Para equipes de marketing por e-mail e criadores solo.

Plug-in da Stripo

Para produtos que poderiam se beneficiar de um desenvolvedor de e-mails integrado de white-label.