Blog de Email Marketing

Conteúdo

O processo de design de um template de email marketing

Juliana Padron Por Juliana Padron em 22.03.2016

Criar templates de email marketing, considerando todas as limitações dos programas de email e outras adversidades que a comunicação impõe, pode ser um tanto desafiador.

Com tantos manuais de boas práticas de criação de templates circulando por aí – e muitos modelos prontos gratuitos ou à venda por preços irrisórios –, os layouts de email marketing acabam saindo todos muito parecidos, tornando cada vez mais difícil a diferenciação da comunicação entre empresas de um mesmo segmento.

A tal da correria do dia-a-dia nas agências também impede o exercício do processo criativo pelos profissionais, que encontram nas fórmulas prontas a solução para aquela campanha que precisa ser disparada de última hora. Temos, ainda, o próprio ambiente “hostil” do email, que causa certo receio nos profissionais em relação ao que pode ser usado ou não, o que funciona e o que quebra nos programas de email – especialmente mobile –, impedindo a inovação.

Por um lado, a “padronização” do design de certos tipos de emails é boa para os destinatários, que de tanto verem layouts parecidos já sabem como interagir com as mensagens. Por outro, claro, há o problema da falta de identidade própria para cada empresa, que deixa de ter um formato especial de comunicação para aderir ao lugar-comum, já testado e certo.

A busca pelo design perfeito

Ao criar um template de email marketing é importante respeitar a identidade visual da empresa, já que o email é uma comunicação que estabelece laços estreitos com o site, que por sua vez, também respeita a identidade visual padrão da empresa, então é preciso mantê-los coerentes.

Porém, o design do template não precisa seguir à risca o design do site, especialmente quando se trata de um ciclo de email marketing de muitos dias, cuja frequência de envio é alta. Manter o mesmo design por muito tempo pode cansar o destinatário e, invariavelmente, chega a dúvida sobre como inovar no design mantendo-se fiel à identidade visual corporativa.

Essas razões associadas às limitações dos programas de email nos forçam a elevar a criatividade a níveis superiores aos daqueles que atingimos quando criamos websites, em que praticamente tudo é permitido e possível de ser realizado.

No email marketing, não podemos pecar pelo excesso de imagens para não deixar a mensagem muito pesada (kb), o que nos leva a procurar alternativas de layouts possíveis de serem executados apenas com cores hexadecimais e tabelas. Nesse quesito, o estilo flat design é um alento ao coração.

Partindo do princípio, que é o objetivo da ação, precisamos responder: “o que o destinatário precisa fazer ou saber?”; “devo criar um email promocional, informativo ou transacional?”. É importante que seu email marketing exija poucas ações do destinatário, assim você mantém o layout curto e objetivo, mais fácil de ler, compreender e rápido de interagir.

Um método

Há muitos sites que fornecem inspiração, especialmente aqueles que vendem templates prontos, e nessa hora é preciso cuidado para não copiar o “design inspirador”.

Para não cair nessa armadilha, existe uma técnica que produz resultados muito interessantes: quando você encontrar um layout que lhe agrade, reproduza-o inteiramente. Redesenhe tudo mesmo, igualzinho ao modelo. Agora, deixe isso “de molho” por uns três dias, sem olhar para ele nenhuma vez nesse intervalo de tempo e, depois, crie um novo trabalho tentando reproduzir as características mais marcantes que você se recorda dele.

Você acabará por desenhar algo que tem a inspiração do trabalho inicial, mas que receberá toques só seus, porque é muito provável que você ache que determinadas mudanças farão muito melhor ao design ou mesmo sua falta de memória irá lhe ajudar a criar algo exclusivo.

Identidade visual

Geralmente, a identidade visual da empresa é que norteia a aparência do email marketing em relação à paleta de cores e à tipografia – esta, com ressalvas, conforme o tópico Textos, mais adiante. Há empresas que possuem um manual de identidade visual que precisa ser observado para criar qualquer comunicação que vá a público, de forma a manter um padrão visual e de linguagem.

Só é importante que esse manual de identidade visual contemple também estilos para serem usados na web. Atualmente, a maioria das fontes comerciais mais conhecidas oferece licenças para uso em desktop e na web, mas aquelas que não fornecem precisam ter uma alternativa, digamos, mais comum.

A paleta de cores também é muito importante no processo de criação do template de email marketing. Além de considerar o contraste entre as cores escolhidas (especialmente entre fundo e textos), é preciso pensar no contexto em que o email será visualizado. Por exemplo, dependendo do dia e horário em que o email for enviado, o que as pessoas estarão fazendo? Será que elas estarão em movimento? Talvez sob o sol? Já em casa, na cama, com as luzes apagadas? As cores escolhidas oferecem bom contraste e legibilidade do email nessas condições?

Algumas empresas, principalmente as grandes que ainda não têm uma presença consolidada na web, têm ideias arcaicas de como devem ser seus emails. Aqui, na Templateria, Não é de todo raro recebermos pedidos de criação de emails que tenham um “papel de parede” ao fundo, com textura, borda e outros rococós inerentes à comunicação em papel. Acredite ou não, já tivemos solicitações de criação de comunicados que mantivessem, no email, a imagem do carimbo de um cartório, como se o “documento” estivesse autenticado. Só faltou pedir um selo também. :/

Estrutura

Como a bola da vez são os layouts responsivos, não precisamos mais nos manter à regra rígida de um template com 600px de largura. Da mesma forma como as estruturas podem se adaptar a telas pequenas, podem se adaptar a telas maiores, expandindo sua largura.

Se possível (e dependendo da largura que você adotar para o email), procure criar um layout de uma coluna, em vez de múltiplas, pois mesmo que você não faça um HTML responsivo, o template será melhor visualizado em dispositivos mobile, ao encolher proporcionalmente para o tamanho da tela.

Algo que ajuda muito no processo de criação do template é organizá-lo em módulos de informações, como cabeçalho, rodapé, texto de saudação, banner, bloco de produto, artigo, redes sociais etc. Certos tipos de módulos podem ter disposições diversas, como o bloco de informações de um produto, em um email de e-commerce, que pode assumir tanto a diagramação horizontal quanto a vertical, alternando a posição da imagem.

Trabalhar com diferentes módulos de conteúdo em um mesmo template nos dá a liberdade de montar diferentes layouts de emails. Melhor ainda, se isso for combinado a uma plataforma de envios que ofereça um editor adequado a essas experimentações, que permita ocultar e duplicar blocos com facilidade, montando um novo template em instantes. Isso é especialmente útil para equipes de marketing com profissionais que não têm conhecimento em HTML.

Mobile First

Isso significa, literalmente, “mobile primeiro”: pensar o layout primeiro para o ambiente mobile, depois adicionar os “acessórios” para o ambiente desktop. Como no ambiente de email mobile temos diversas restrições (suporte do programa de email a media queries e tamanho da tela, principalmente), pensar o layout para mobile em primeiro lugar nos permite focar naquilo que realmente é importante, sem dar distrações para o destinatário.

Em seu livro Mobile First, Luke Wroblewski diz que adotar o mobile first:

  • Lhe prepara para o crescimento explosivo e as novas oportunidades emergindo em mobile, hoje;
  • Lhe força a focar e priorizar seus produtos ao “abraçar” as limitações inerentes ao mobile design e
  • Lhe permite entregar experiências inovadoras ao construir [o layout] considerando as novas capacidades nativas dos dispositivos mobile e seus modos de uso.

Dessa forma, em vez de pensar o layout primeiro com 600px de largura, devemos, primeiro, concebê-lo com algo em torno de 320px de largura, tendo em mente a tela de um smartphone. Ao migrar para esse ambiente mais enxuto, percebemos que já não é viável criar um layout com 2 ou 3 colunas, preferindo empilhar os blocos de conteúdos uns sobre os outros.

Além disso, o mobile first muda nosso padrão de pensamento, uma vez que não diz respeito apenas à técnica de criação. Quando uma pessoa interage com um email no smartphone, será que ela precisa ver todos os ícones que eu pretendia colocar no layout desktop? Aquelas selinhos de “site confiável” e “site auditado” são relevantes nesse ambiente?

Não é muito fácil adotar o mobile first. É preciso um bom conhecimento sobre os dispositivos mobile que mais circulam por aí, sobre os programas de email existentes nesses dispositivos e o próprio comportamento do destinatário. Mas isso não quer dizer que é impossível: comece com estruturas simples e pouco conteúdo. Um arroz e feijão de qualidade é muito melhor do que um prato requintado mal feito, certo?

Textos

Para saber o quão enxuto ou extenso está o seu email marketing, escreva os textos da mensagem no Word, por exemplo. O ideal é que todo o conteúdo do email não ocupe mais do que uma página e meia (A4) no Word, considerando os textos formatados em fonte tamanho 12px.

Essa não é uma recomendação que tenha a ver com pontuação de spam ou com a entrega da mensagem, apenas um parâmetro que demonstra o tamanho da rolagem vertical que seu email vai ter e, consequentemente, dá uma noção da probabilidade do destinatário percorrer toda sua extensão.

Quanto à aparência dos textos, algo que os designers precisam ter em mente ao desenhar templates de email marketing são os recursos de formatação de textos existentes em CSS que funcionam nos programas de email. Se os layouts forem desenhados levando em consideração apenas os recursos gráficos do Photoshop, o resultado vai ser um layout impossível de ser reproduzido em HTML.

Flexibilidade é a palavra de ordem quando criamos layouts para email marketing. Isso significa que não podemos criar designs que fiquem perfeitos apenas de um jeito, com (por exemplo) exatos 153% de distância entrelinhas e 20% entreletras. Em CSS, temos propriedades que controlam tudo isso também, mas elas não funcionam da mesma forma em todos os programas de email.

Web fonts

Há alguns anos, era muito importante que o email marketing tivesse textos escritos no próprio HTML (e não “presos” dentro de imagens) para reduzir sua pontuação de spam. Atualmente, ainda é muito importante que os textos do email marketing sejam escritos no HTML, mas por outro motivo: para que eles sejam exibidos com qualidade em diversos tamanhos de tela.

E, para que os textos sejam escritos no HTML, precisamos formatá-los com fontes que os destinatários tenham em seus computadores. É por isso que a grande maioria dos emails usa fontes como Arial, Verdana ou Times New Roman, já que elas estão presentes na maioria dos sistemas operacionais.

A grande frustração de muitos designers reside justamente na tipografia. Cria-se um layout incrível, com todos os textos formatados na lindíssima (e caríssima) fonte Gotham, com super controle de distância entrelinhas, parágrafos perfeitamente alinhados e, na hora de criar o HTML, #todoschora. As pessoas da vida real não têm a fonte Gotham em seus computadores, então será impossível formatar os textos no HTML com essa aparência.

Nossa sorte é que já é possível usar as chamadas web fonts nos HTMLs de email marketing. São fontes que ficam hospedadas na web e, na hora em que o destinatário abre a mensagem, o programa de email dele busca na web a tal fonte para renderizar os textos. Com isso, conseguimos agregar mais design ao email marketing sem prejudicar sua usabilidade.

Design da informação

O design da informação é uma ciência assim como webdesign, design gráfico e design de produto. É, basicamente, a arte de dar forma e beleza à informação; transformar blocos massantes de dados em algo agradável de ler. Isso inclui combinação de tipos (fontes), uso adequado do espaço em branco, criação de esquemas, infográficos, listas, etc.

Nancy Duarte é mestre nisso. Apesar de seu negócio estar voltado a apresentações corporativas em slides e vídeos, suas dicas e conceitos são valiosíssimos para email marketing também. Para saber mais, recomendo o livro slide:ology – A arte e a ciência para criar apresentações que impressionam.

Integrações

Dependendo do seu segmento de atuação, pense em como você pode integrar outras tecnologias ou mídias à sua mensagem, sempre pensando no conforto e praticidade de seus destinatários.

Por exemplo, empresas que enviam por email cupons de desconto, tickets de entrada e outros documentos que precisam ser apresentados em um estabelecimento físico, podem considerar a integração de seus emails com o Passbook do iPhone e do Android.

Já se o objeto da mensagem for um evento, inclua no template um link para um arquivo de calendário, assim o destinatário pode adicionar o evento à sua agenda eletrônica – Google Calendar, Yahoo! Calendar, iCal ou agenda do Outlook.

Empresas que oferecem aplicativos para celular e tablets podem colocar, no email marketing, links para o próprio app (quando o email for enviado para usuários) ou para as app stores em que ele está disponível para download.

O link “indique a um amigo” convencional já morreu faz tempo, mas hoje podemos inserir, nos emails, links para compartilhamento dos conteúdos nas redes sociais, inclusive no WhatsApp.

Enfim

Como designer, me entristece muito não poder dizer que “o céu é o limite” na criação de templates de email marketing porque as limitações não são poucas.

Mas, de certa forma, isso é bom para exercitar o processo criativo: posso me imaginar, por exemplo, como um gênio da NASA que precisa criar um filtro de ar para um astronauta em órbita usando apenas fita crepe e uma meia. Não há exercício melhor (ou pressão maior) que isso.

😉

Assine Nossa Newsletter


Por favor informe um endereço de email válido.

Acompanhe Nossas Publicações