Guia Completo de Design para E-Mail Marketing

Que tal aprender como tornar as suas campanhas de e-mail marketing mais efetivas e garantir uma maior taxa de cliques e satisfação do seu consumidor ao recebe-lá? Vou trazer aqui uma adaptação do trabalho do Mailchimp sobre desenvolvimento visual de e-mails, essencial para qualquer designer de e-mails.

Já estamos no século XXI e o e-mail continua sendo umas das ferramentas mais eficientes de comunicação digital. Mesmo sendo a mais antiga forma de comunicação através da internet, este formato sobreviveu a diversas tentativas de derrubá-lo. Estudos da Litmus mostram que o e-mail é a mídia que as pessoas mais acreditam que irá estar viva daqui a dez anos, na frente inclusive do Facebook.

É claro que ele mudou, ganhou diversos concorrentes e hoje e dia as pessoas usam ferramentas muito mais modernas para se comunicar, como o Facebook e WhatsApp, mas nenhuma delas conseguiu ainda decretar o fim do e-mail. Na verdade, a tendência é o crescimento da relevância do e-mail marketing, pois é uma das formas mais diretas e segmentadas disponíveis, pois há um consenso do usuário que recebe a mensagem – ele pediu para receber aquele e-mail, diferente dos anúncios em outros serviços.

Este manual é uma tradução e adaptação do Email Design Guide do Mailchimp, e está dividido em 7 sessões: Conteúdo, Modelos, Identidade & Cores, Imagens, Layout, Fontes e Call-To-Action. Além das traduções, vou trazer alguns conteúdos extras.

Lembre-se que este manual é focado apenas no desenvolvimento visual e técnico do e-mail marketing, portanto deixamos as dicas sobre campo de assunto dos e-mails e testes A/B para um próximo guia.

Conteúdo

Conteúdo é rei, certo? O conteúdo é fundamental em qualquer meio, mas no e-mail ele é essencial. Um conteúdo fútil pode ser considerado SPAM ou mesmo incentivar o usuário a clicar no botão “Não quero mais receber estes e-mails“. E isto é muito importante porque é muito mais difícil reconquistar um cliente do que conquistar um novo.

Mande mensagens relevantes, evite perder contatos. Muitas empresa pagam por leads, então não seja a empresa que os desperdiça.

Foque a sua mensagem

Foque a sua mensagem no e-Mail Marketing

Os e-mails mais efetivos geralmente são aqueles que tem a mensagem mais clara. Se você tem muita coisa para dizer, tente desenvolver diferentes e-mails.

Ou mesmo distribua o conteúdo de uma forma diferente. Você não precisa entregar toda a informação dentro do e-mail, pode apenas direcionar para outro local – como um site ou blog.

Seja conciso

Seja conciso em seu e-mail marketing

Reduza o tamanho do seu e-mail até não ser mais possível.

Usufrua de toda arte da síntese que você aprendeu explorando os 140 caracteres do Twitter. Cada palavra a mais dentro do e-mail pode representar 0,01% a mais de chance de ele ser ignorado, excluído ou jogado no lixo.

Crie uma hierarquia

Use hierarquia no seu conteúdo

Coloque a informação mais importante por primeiro para aquelas pessoas que estão sem tempo.

O e-mail serve para informar e direcionar os seus clientes, correto? Então tente fazer isso o mais breve possível. Na publicidade aprendemos que o seu outdoor tem que ser lido em apenas 3 segundos. Aplique essa mesmo conceito para o seu e-mail.

Faça ele quebrado

Faça quebras para organizar o conteúdo

Use títulos e listas para dividir o conteúdo em sessões de fácil entendimento. Isso ajuda na leitura superficial.

As tags H1, H2, H3, H4, H5 e H6 ajudam a organizar o conteúdo em blocos, assim como as listas (UL e OL) ajudam dar quebras em blocos de conteúdo. As pessoas raramente leem o conteúdo inteiro, da mesma forma que você provavelmente não leu esse post inteiro, palavra por palavra.

Obs.: Colocar palavras-chave em negrito e itálico ajudam bastante neste item também 😉

Faça links para fora

Faça links externos

Se você tem mais informações para passar, direciona o e-mail para uma página do seu site.

Não ache que alguém vai realmente ficar mais do que alguns segundos lendo o seu e-mail. Tem algo importante? Crie um link. Tem mais produtos para vender? Crie mais links. Tem um site? Adivinha… faça um link.

Modelos

Os modelos, popularmente mais conhecidos como templates, são fundamentais dentro das ações de e-mail marketing, pois a construção de um e-mail personalizado pode demorar e nem sempre o tempo está a nossa favor. Os modelos ajudam a acelerar esse processo e garantir uma entrega cada vez melhor.

Você pode baixa alguns templates prontos do próprio Mailchimp, alguns bem legais do Litmus e do CampaignMonitor. Um framework para e-mails interessante é o Foundation for Emails.

Comece de um rascunho

Comece de rascunhos simples

Existem dezenas de modelos prontos na internet e começar um e-mail 100% do zero é uma tarefa complicada, então procure usar frameworks básicos, como alguns que citamos neste outro post, ou mesmo alguns oferecidos pelo Mailchimp no Github.

Salve & organize os seus modelos

Sempre salve e organize os seus modelos

Como falamos antes, o trabalho de gerar modelos pode ser árduo, portanto, recorra aos modelos. Pense em quais ações de e-mail marketing você tem, datas comemorativas, informativos, e-mails transitórios, e-mails de confirmação de compra, e-mail de produtos, e-mail de lançamento, enfim, anote todos os tipos de e-mail que você trabalhe e pense em quais modelos eles melhor se aplicam, crie variações e deixe em algum lugar para usar sempre.

Identidade & Cores

Seguir os princípios do design (Alinhamento, Balanço, Contraste, Proximidade e Repetição) vai ser essencial para qualquer material visual, mas em ações de e-mail segui-las pode ser a diferença entre a pessoa clicar no seu call-to-action ou não.

Deixe a sua marca

Sempre use a sua marca em seus conteúdos

Além do remetente, o seu e-mail deve utilizar o logo e identidade visual da sua marca. É essencial que a pessoa saiba de quem está recebendo a mensagem assim que abri-lá.

Escolha uma paleta de cores

Paleta de cores dentro do e-mail marketing

Ainda dentro dos princípios do design, a repetição é essencial e buscar sempre utilizar a mesma paleta de cores garantir um reconhecimento de marca mais rápido, além de reforçar a sua marca a cada mensagem enviada. Essencial para marcas novas, assim como para grandes corporações.

Separe o cabeçalho e o rodapé

Cabeçalhos e rodapés no design de e-mail marketing

O cabeçalho e rodapé de um site são muito importantes. O cabeçalho ajuda a identificar o remetente e passar informações gerais, como motivo da mensagem, remetente e links para o seu site. O rodapé, por sua vez, passa informações adicionais, como link para remover da lista, como a pessoa entrou naquela lista, etc.

Trabalhando com sua identidade e cores da sua paleta, é interessante e muito fácil diferenciar o cabeçalho e rodapé do restante da mensagem.

Imagens & Figuras

Imagens e figuras são essenciais para trabalhar a qualidade visual do seu e-mail. Apesar de muitos leitores bloquearem automaticamente o carregamento das imagens, ou elas demorarem para carregar em conexões lentas, elas são essenciais para um bom trabalho visual.

É fundamental que a mensagem seja entregue mesmo que as imagens não carregam – e, da mesma forma, que ele seja o mais belo, dentro do possível.

Use o seu logo

Use sua marca dentro do design de e-mail marketing

Utilize o logo da sua empresa em algum local dentro do e-mail, preferencialmente no cabeçalho para que aqueles que receberem a mensagem logo consigam associar o seu e-mail a sua marca.

Fotografias

Fotos são essenciais para o design de e-mail marketing

Trabalhar com fotografias é essencial, mas muito importante na maioria dos casos. Lembre-se que elas ajudam a dar vida a mensagem, mas você precisa cuidar para não focar toda a informação em uma imagem, mas sim usá-la para complementar.

Existem diversos serviços que oferecem fotos gratuitas que você pode usar ou trabalhar em cima, como Freepik, Unsplash, Stocksy, CanStockPhoto, LittleVisuals, ou mesmo os serviços pagos como o ShutterStock, Adobe Stock e iStock.

Tamanho correto

Redimensionar suas imagens é essencial para o design de e-mail marketing

Uma dica que serve tanto para o trabalho de design, como o de performance do e-mail, é aprender a otimizar as imagens tanto em tamanho como peso do arquivo. Se o seu e-mail tem no máximo 600px, acostume-se a nunca utilizar uma imagem maior que 600px. Quando for usar a foto, procure exportar no melhor balanço de peso e qualidade (Adobe Photoshop e Illustrator tem a opção “Salvar para Web”) que lhe auxilia nisto. Utilize ferramentas como TinyPNG e o JPEGmini para diminuir o tamanho dos arquivos antes de enviá-lo.

Estrutura

A forma como você apresenta a informação pode interferir diretamente na forma como as pessoas a percebem. Um e-mail bem organizado dentro de uma estrutura pode ser a diferença entre a pessoa ler e clicar nos seus links, ou simplesmente ignorar e marcar como spam.

Organize a leitura

Organização de conteúdo para e-mail marketing

As pessoas estão submersas a informações e propagandas, ainda mais dentro da internet. Nossos olhos estão cada vez mais treinados a ignorar certos padrões e por isso dedicamos cada vez menos atenção a banners e outras formas de mídia. No e-mail não é diferente. Você tem alguns segundos para convencer a pessoa a ler toda a mensagem e apenas cerca de 15 segundos para apresentar toda a informação.

Organize o conteúdo dentro do e-mail de forma organizada, priorizando o que é mais importante e o que deve ser lido por primeiro. Assuma que a sua informação é superficial na vida da pessoa, então você deve tentar convence-lá a ler toda a mensagem – tarefa difícil, não é?

Deixe espaço

Espaço em branco é ideal para qualquer design

Não tente colocar todas as informações que você quer em um lugar pequeno. Use do espaço em branco, deixe cada elementos “respirar” dentro do layout. Bloco de informação muito densos não são atrativos para a leitura.

Aprender sobre alinhamento

Alinhamento, um dos princípios do design

O alinhamento é mais importante do que a maioria das pessoas acredita. Não é à toa que faz parte dos princípios do bom design, que mencionamos antes. Centralizar imagens geralmente funciona para conteúdos curtos e rápidos, como imagens e chamadas, enquanto textos mais longo recomenda-se trabalhar com o alinhamento a esquerda. Não existe uma regra, mas usar alinhamento a esquerda ou justificado pode interferir na leitura também – eu prefiro alinhamento a esquerda.

Independente da sua escolha de alinhamento, mantenha a harmonia ao longo de todo o e-mail. Jamais misture alinhamento a esquerda com justificado e cuidado ao usar elementos centralizados e elementos alinhados a esquerda em conjunto.

Separe por sessões

Sessões ajudam a organizar o seu e-mail

Se há muito conteúdo para passar dentro da mesma mensagem (e não é possível quebrar em mais e-mails, como mencionamos antes), procure dividir o e-mail em sessões através da utilização de cores, como os e-mails da Litmus, ou mesmo coloque linhas visuais que dividam o conteúdo.

Tipos & Fontes

Dentro da elaboração de qualquer material gráfico, a tipografia é essencial (inclusive existe uma linha visual chamada de AllType que utiliza apenas tipografia para construir o seu conteúdo), e dentro do e-mail marketing é tão essencial quanto, apesar das limitações.

Seja legível

Seja legível, é essencial

Esta regra é tão óbvia quanto parece, mas ignorada muita vezes. Preocupe-se na facilidade de leitura da mensagem que você está passando. O Mailchimp recomenda uso entre de uma fonte de 14 a 16px, sendo 14px para e-mails longos e 16px para os mais curtos (quando há poucas frases).

Escolha a fonte certa

Escolha a fonte certa

As fontes são basicamente divididas em duas categorias, sem serifa (sans-serif) e com serifa (serif). Serifa, aquela “perninha” depois da fonte, passa, geralmente, o ar mais sofisticado, enquanto as fontes sem serifa tendem a ser mais casuais. Não recomenda-se o uso de mais de duas ou três fontes em um mesmo e-mail.

Fontes Websafe

Se você já desenvolveu para web, provavelmente já ouviu falar do termo “safe for web” ou “fontes websafe” que basicamente são as fontes mais confiáveis para serem usadas dentro de sites e conteúdo para internet. Neste link você encontra uma lista de fontes que são seguras para web.

Mais o que as torna mais confiáveis? O fato de praticamente todas as pessoas já terem ela instalada no computador. Assim, ela não precisa ser carregada e também porque uma boa parte dos programas de ler e-mails e webmails não renderiza as fontes baixadas.

Devido a este problema, é normal usar regras de CSS como “Font-Family: Helvetica, Arial, sans-serif;” que basicamente diz para o navegador usar Helvetica, que é uma fonte menos comum e, caso não tenha, irá usar a Arial.

Calls to Action

Como falamos lá no começo deste texto, os call-to-action (também conhecidos como CTA, ou simplesmente o “Botão de Chamada”) são os botões que chamam o usuário para a ação. Eles são comuns em landing pages, sites e essenciais nos e-mails.

Conheça o seu call-to-action

Escolha corretamente como chamará para a ação

Quando falamos de botões call-to-action existem dois erros muito comuns. O primeiro é não saber da existência deles. O segundo é não saber qual é exatamente o seu objetivo com eles. Saiba qual é o objetivo da sua mensagem e garanta que o seu botão de chamada esteja alinhado com este objetivo.

Seja claro e objetivo

Seja claro em seu CTA - Call to Action

Sabe quando você entra em um site ou abre um programa e há um botão que você não sabe o que ele faz? Você não fica até com medo de apertar? Um grande problema na criação dos botões de chamada, os CTAs, é não ser claro o suficiente com o que aquele botão faz… para onde irá lhe levar. Deixe essa informação clara o suficiente para o leitor.

Aproveite este botão para usar linguagem ativa, isso melhora as chances de ser clicado. Voz ativa é quando você incentiva uma ação, enquanto em uma linguagem passiva você apenas sugere que o leitor o faça. Use palavras como “Clique aqui para ver mais” ou mesmo “Compre agora”.

Seja óbvio

Seja óbvio em cada botão de ação.

O grande problema de qualquer profissional é achar que algo é fácil porque é óbvio para ele. Os seus leitores são diferentes de você, e provavelmente não vão achar tão fácil os botões como você, que fez o design deste conteúdo. Procure deixar os botões de ação bem destacados e os diferencie do conteúdo.

Alinhe as expectativas

Alinhe as expectativas em seu email

Não há nada pior que clicar um botão e não encontrar o que buscava. Alinhar as expectativas é ter certeza que a pessoa sabe o que irá encontrar ao clicar naquele botão, deve ser compreensível o que está além daquele link. O texto do CTA pode indicar isso, ou mesmo o seu texto de apoio.

“Clique no botão abaixo para baixar o PDF” ou “Comprar Agora” são exemplos de chamadas que certamente deixam claro suas intenções.


Espero que você tenha compreendido todas as dicas e possa garantir que está mais preparado para fazer um design muito melhor e mais eficiente para as suas campanhas de e-mail marketing. Lembre-se que apenas um bom visual não garante uma boa entrega, portanto estude e trabalhe nos aspectos visuais e técnicos para garantir a maior entregabilidade, junto do melhor retorno em cliques e aberturas.

Para quem quer se aprofundar mais no assunto, recomendo ler o nosso post sobre e-mail marketing para dispositivos móveis e para quem ainda está começando, nosso post sobre e-mail marketing para pequenas marcas.

Sentiu falta de alguma dica? Quer aprender mais alguma coisa sobre e-mail marketing? Deixe um comentário!

Algumas das imagens deste post são de autoria do Mailchimp.com e adaptações de arte do Freepik.com.

PUBLICADO POR

Dennis Altermann

Fundador-Editor aqui no blog Midiatismo, trabalhando com marketing digital na DuPont Pioneer do Brasil. Entusiasta e estudioso nas áreas de comunicação, cultura, comportamento e tecnologias digitais.

Novidades e atualizações, direto em seu e-mail