Blog de Email Marketing

Templates

Como criar um template de email marketing

Juliana Padron Por Juliana Padron

Como criar um template de email marketing como a Templateria

O objetivo deste post é falar do meu processo criativo de como criar um template de email marketing ainda na etapa da concepção do design. A fase de criação da arte é tão importante quanto a programação do HTML porque é justamente a disposição e a formatação escolhida para os elementos que irão determinar as possibilidades do email marketing ser responsivo ou não.

Como já conheço as limitações de cada programa de email, meu processo criativo sofre essa interferência e eu já sei os recursos gráficos que posso e não posso usar nos layouts. Quando quero fazer a ousada, fico preparada psicologicamente para mudar meu design se a programação HTML se mostrar um desastre.

Características gerais

Como criar um template de email marketing “do zero” pode ser uma tentação pela tela em branco que representa, às vezes faço um wireframe rabiscado em papel mesmo, às vezes já vou direto para o software – uso o Illustrator – para manter as coisas simples. Mas a primeira providência é delimitar o meu espaço de criação: entre 600px e 800px de largura, que decido de acordo com a quantidade e complexidade dos conteúdos que devem entrar ali.

Grid

É muito útil também usar um grid (ou grade, na tradução literal) para orientação no posicionamento dos elementos. As pessoas que têm experiência com produção de trabalhos impressos devem conhecer o livro Planejamento Visual Gráfico, que fala da importância do grid na construção de layouts agradáveis à leitura, conforme o volume e tipo de informação a ser transmitida.

Para quem se concentra na web, é como se levássemos para o software gráfico aqueles grids de frameworks como 960, Bootstrap e Foundation.

O grid especifica as áreas a serem ocupadas pelos conteúdos (e seus tamanhos) e as áreas de “respiro”. Como não sabemos disso antes de começar a desenhar, posicionamos linhas-guia a cada X pixels no espaço que previamente delimitamos (esse X você define: 10px, 20px, 32px etc).

Como criar um grid para o layout de um template de email marketing

É só pegar a largura total do email, digamos 600px, e dividir por um valor que gere “pedacinhos” de áreas. Uma vez que esses pedacinhos são frações do tamanho total, melhoramos a proporcionalidade entre os elementos e suas distâncias e criamos um layout harmônico.

Exemplo de Grid num Template de Email Marketing

No exemplo acima, o grid é esse quadriculado que cobre toda a área do email, que desenhei no Illustrator. Os quadradinhos gerados pelo grid têm largura e altura de 20px, e dessa forma eu estabeleço as larguras, alturas e espaçamentos dos conteúdos garantindo um visual proporcional.

O grid não é reproduzido no HTML com fidelidade pixel a pixel, mas seu uso na etapa do design é importante para definirmos os espaçamentos principais e tamanhos de imagens e áreas de texto. Programas de email como o Outlook podem adicionar alguns pixels ao redor dos elementos no HTML, então os tamanhos de células e espaçamentos finais entre os elementos sempre terão alguma diferença – para mais ou menos – em relação ao grid original desenhado. Mas não se desespere, essa diferença dificilmente será percebida a ponto de acharmos algum problema grave na proporcionalidade entre os elementos.

Paleta de cores e tipografia

A paleta de cores e a tipografia são os outros elementos que nortearão a criação do design do email marketing. Ferramentas como ColourLovers e o Adobe Color CC (antigo Kuler) são apoios importantes, assim como o Google Fonts, quando pretendo usar fontes especiais.

Esses dois elementos – tipografia e paleta de cores – influenciam enormemente no estilo de design que o template terá. É quase como se, depois de definidas as cores e a tipografia, o template passasse a falar por si só, “pedindo” por certas características (leve, “duro”, sóbrio, divertido), e a criação passa a fluir com facilidade – sei que com essa afirmação estou correndo o risco de parecer doida, mas eu realmente tenho a impressão de cada template “fala” comigo.

Topo

A mão na massa começa com o topo e o rodapé, que geralmente serão reaproveitados em outras campanhas, até mesmo nos emails transacionais, e precisam conter as informações básicas da empresa.

No topo, posiciono o logo, os ícones de redes sociais (que às vezes se repetem no rodapé), links de preview e opt-out e, dependendo do segmento do cliente, também entram número(s) de telefone e email de atendimento ou televendas. Ultimamente, tenho visto alguns emails com o link de preview no rodapé e fico me perguntando por quê o designer fez essa escolha.

Link de preview

A ideia do link de preview é fornecer ao destinatário uma alternativa de visualização do email como página da web quando ele não vê a mensagem corretamente, e é muito difícil que o leitor vá até o rodapé do email marketing para procurar essa alternativa.

Quando certos padrões de comportamento são convencionados na web, é difícil mudá-los. Se você pensa diferente, por favor, comente este post para enriquecermos a discussão!

Preheader

Quando o template que estou criando é para ser usado na plataforma de envios da Templateria como template pronto e gratuito aos nossos clientes, não considero a presença do preheader no layout porque nosso sistema tem um campo específico para inserir essa informação durante o processo de criação da campanha. Assim, o texto aparece para o destinatário, próximo ao Assunto do email, mas fica oculto no layout. Thug Life.

Exemplo de texto de preheader no email marketing

Porém, quando o template de email marketing é para um cliente que usará outra ferramenta de envios, dou a opção de deixar o preheader oculto ou visível, e o cliente escolhe o que prefere. Obviamente, o preheader visível no template ocupará um espaço a mais no topo e, mesmo que a fonte do texto seja pequena (não é recomendado usar menos de 9px por questões de usabilidade e prática antispam), sua presença pode poluir um pouco o layout.

Telefones

Quando há números de telefone no email marketing, é importante lembrarmos de colocar links de ligação telefônica neles. Assim, que lê o email a partir do celular pode apenas tocar no número com link para ligar.

Para quem o WhatsApp é importante como forma de relacionamento ou venda, também é possível adicionar, no número de telefone que vai escrito no email marketing, um link específico para o leitor abrir o WhatsApp e enviar alguma mensagem para este número.

Redes sociais

Dependendo do sistema operacional utilizado pelo destinatário em seu smartphone, os links para as redes sociais podem ter comportamentos diferentes. Nos iOS (iPhone, iPad), ao tocar sobre um link de rede social, o app de email – quer seja o Mail nativo ou o Gmail app ou outro – não abrirá o app da rede social instalado no smartphone, mas abrirá o link como página web no navegador.

Isso pode ser um transtorno porque as pessoas não estarão logadas em suas redes sociais pelo navegador, já que usam os apps, então quem queria ver a página do Facebook do remetente do email marketing, precisará saber qual é o nome da página e procurar-la no app do Facebook, já que usar o link direto do email marketing poderá ser um transtorno.

Já no Android, na primeira vez em que o destinatário toca no link de uma rede social em um email ou página web no navegador, o sistema operacional lhe pedirá permissão para abrir o link direto no app. Se o usuário não permitir, todas as próximas vezes que ele tentar acessar um link de rede social de um email marketing ou página web, o link será aberto no navegador, como no iOS. Se o usuário permitir que o app seja aberto, esse será o comportamento padrão para as próximas vezes.

Miolo

Para o miolo do email marketing, o conteúdo propriamente dito, crio um design diferente dependendo do tipo de mensagem que preciso criar: newsletter, transacional, de e-commerce, convite, curso etc.

De acordo com o objetivo da comunicação, penso nos tipos de blocos de conteúdo que o email marketing precisa ter: título principal, texto de saudação, dados de um produto, de um artigo, botões e outros.

Essa é a parte mais divertida porque, dependendo do tempo disponível para a criação e do objetivo de criação do email marketing, podemos largar o computador por um tempo e usar lápis, papel e tesoura para construir diferentes blocos de conteúdo e testar as possibilidades de combinações deles entre si. Esse processo criativo é muito útil também para websites.

Já desde a diagramação do topo e do rodapé, vou posicionando os elementos no layout imaginando como vou programar o HTML dessa estrutura:

  • será viável usar determinado recursos gráficos, como sombra, fundo, borda especial etc)?
  • será possível usar apenas tabelas para reproduzir esse layout?
  • vou precisar embutir algum texto dentro de imagem ou poderei escrever tudo no HTML?
  • as imagens estão posicionadas de forma que eu possa fazer os recortes adequados?

Blocos de conteúdo

Os blocos são definidos de acordo com o objetivo do email marketing. Se é uma newsletter de artigos, os blocos principais serão os que exibem título da matéria, imagem, breve descrição e botão de call-to-action. Se for um template de email marketing de e-commerce, ele terá as áreas de exibição dos produtos com imagem, preço antigo, preço atual, valor do desconto, nome do produto breve descrição e botão do call-to-action.

Claro que esses elementos são apenas sugestões, e cada comunicação define o que exibirá para os destinatários. Mas uma forma interessante de criar o template de email marketing é pensar modularmente, ou seja, já criar no layout todos os tipos possíveis de blocos de conteúdo que um email pode ter: dois artigos lado a lado, três artigos lado a lado, um artigo por linha com imagem, um artigo por linha sem imagem, dois produtos lado a lado, três produtos lado a lado etc.

Como criar um template de email marketing modular

Com um template gigante assim, pode-se pensar em diversas campanhas de email marketing diferentes apenas combinando os diferentes blocos entre sim – ocultando alguns, duplicando outros. Saiba mais sobre o design de templates de email marketing modulares.

Textos

Muitas vezes, antes do processo de criação do design, é preciso lapidar o briefing que o cliente manda (quando manda :P) para otimizar tamanhos e estilos de textos. É i-n-c-o-n-c-e-b-í-v-e-l que o email marketing tenha erros de português, quer seja no assunto ou corpo da mensagem, então, duas outras “ferramentas” importantes no meu trabalho são o Houaiss e a Moderna Gramática Portuguesa.

É triste, mas como exemplo, já recebi briefing para email marketing de corretores de imóveis com textos muito errados das áreas de lazer dos empreendimentos que iriam divulgar. O imóvel iria custar mais de R$ 1 milhão, o email marketing seria enviado para um mailing dito de pessoas de alto poder aquisitivo e os nomes das coisas estariam todos errados, não fosse a revisão que precisei fazer. :/

Imagens

Dependendo do email marketing que estou criando, as imagens podem vir de diferentes fontes: do próprio cliente, de banco de imagens ou criadas por nós mesmos, na Templateria. Esse terceiro caso é especialmente válido para ilustrações, gráficos, diagramas e outros elementos visuais que serão importantes para ilustrar certos textos do email marketing, como as ilustrações abaixo, criadas exclusivamente para uma loja de cortinas, persianas e papeis de parede.

Exemplo de ilustrações para email marketing

Não uso imagens da busca do Google Images porque, fora aquelas de banco de imagens, elas pertecem a alguém, e seu uso sem autorização ou ao menos crédito à fonte não é certo e pode dar o maior rolo – já viu o caso daquele cursinho pré-vestibular que usou a foto na Natalie Portman como uma de suas supostas alunas aprovadas para faculdade?

Meus sites preferidos de banco de imagens são o Shutterstock e o iStockPhoto.

Ícones

Ícones são recursos de design importantes para dar leveza aos textos e facilitar a compreensão e localização de certos conteúdos. Por exemplo, para as redes sociais, é difícil encontrar um remetente que escreva por extenso os nomes das redes, em vez de colocar os ícones de seus logos.

Em casos com esse, os ícones podem chegar a substituir textos, mas só quando eles são mesmo totalmente intuitivos quanto ao seu significado, assim como a lupa já substitui o “buscar” – formulários de busca não funcionam em email marketing, mas podemos usar a imagem de um formulário para atrair o destinatário ao clique – e o ícone de “play” é colocado sobre uma imagem, transmitindo a ideia de vídeo.

O importante é que todos os ícones usados no layout da mensagem tenham a mesma identidade visual. Adotar um mesmo estilo de design para todos os ícones ajuda na harmonização do layout como um todo, que parecerá bem mais bonito.

Ícones para o email marketing

Isso quer dizer que, se eu escolho ícones apenas em traço (sem preenchimento) para as redes sociais, provavelmente eu vou usar o mesmo estilo de desenho para outros ícones que eu quiser inserir no email marketing: lupa de busca, mapa de localização, calendário, relógio etc.

Quando não crio ícones exclusivos para o template de email marketing em que estou trabalhando, geralmente uso os do IconMonstr e do TheNounProject, mas às vezes compro bibliotecas de ícones em sites como GraphicRiver e os bancos de imagens que citei anteriormente.

Rodapé

No rodapé pode-se repetir todas as informações do topo, diagramando-as de outra maneira, mas geralmente acrescenta-se ainda o endereço físico da empresa e até o CNPJ, quando se deseja conferir mais credibilidade ao remetente.

Textos legais – aqueles parágrafos que especificam detalhes sobre a licença das imagens utilizadas, política de frete, formas de pagamento, validade de ofertas etc. – também são inseridos no rodapé, de preferência, com tamanho de fonte mínimo de 11px para garantir legibilidade e não parecer que se quer esconder alguma coisa.

Um link para sua política de privacidade de dados também ajuda a garantir mais credibilidade para a comunicação e o remetente, ainda mais agora que o PL de Proteção de Dados Pessoais foi sancionado.

Como criar um template de email marketing pode melhorar sua percepção sobre usabilidade

Ao criarmos o layout de um template de email marketing, precisamos estar atentos não apenas à exibição correta dos elementos nos programas de email. Pensar apenas nisso é como escrever um texto para um website pensando apenas nas técnicas de SEO.

Em ambos os casos, não podemos esquecer que são as pessoas que vão interagir com nossas comunicações, e tanto websites quanto email marketing precisam ser criados, primeiramente, para elas.

Isso quer dizer – no caso de como criar um template de email marketing – que além de pensarmos se aquele botão que estamos desenhando como call-to-action do email será exibido certo no Outlook, temos que pensar se os destinatários reconhecerão aquele elemento gráfico como um botão e perceberão que podem clicar ali.

Parece óbvio dizer, mas com tantas tendências de design à solta pela web, é cada layout minimalista que vemos por aí que, em certos casos, fica difícil perceber o que é um banner, um botão ou um simples callout (caixa com texto em destaque, sem necessariamente ter um link).

Um template de email marketing, por ser uma peça pequena de comunicação – nem de longe tão extenso quanto um website) pode dar uma boa noção do que é um layout com boa usabilidade, ou seja, com textos legíveis, botões em tamanho e percepção razoáveis, bom contraste de cores.

O aprimoramento constate faz parte de qualquer trabalho, e o designer gráfico que puder participar do processo de criação de um template de email marketing estará no caminho certo para construir bases sólidas da área de user experience design.

Assine Nossa Newsletter



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

Acompanhe Nossas Publicações