Design de e-mail 101: um guia para criar e-mails profissionais
Cristina Lauren
1 de agosto de 2021
Já falamos sobre como codificar e-mails do zero e guiou você através a diferença entre codificação de e-mail e codificação da web , mas agora gostaríamos de orientá-lo sobre como criar e-mails. Da construção da estrutura ao teste do produto final, criar um e-mail é um processo complexo, então vamos analisar algumas das melhores práticas.
Começando
Então, você quer criar um e-mail... mas por onde começar? Você pode estar se perguntando: devo esboçar um layout, copiar o formato de e-mails de marcas que realmente admiro ou simplesmente experimentar algumas ideias até que algo funcione? É claro que parte do processo de criação de e-mails é descobrir o que funciona e o que não funciona, mas definitivamente ajuda a garantir que você tenha os princípios básicos dos padrões de marketing da sua marca. É por isso que você deve começar com uma auditoria de e-mails. Este primeiro passo ajudará você a avaliar as necessidades de longo prazo da sua marca e a definir corretamente os objetivos do seu projeto. Para isso, você precisará reunir alguns e-mails atuais, diretrizes da marca e outros recursos de marketing, como logotipos e fontes, para ter uma ideia mais clara do que essencialmente representa sua marca visual.
A partir daí, você poderá criar um sistema de design personalizado, que é basicamente um catálogo contendo todos os elementos gráficos que você usará para criar o design dos seus e-mails. Esse sistema servirá como base e poderá conter diversos elementos da sua auditoria de e-mails, desde estilos de fonte a cores e ícones.
À medida que você aprende mais sobre seu público e sua marca continua a crescer, ela inevitavelmente evoluirá, o que significa que seus padrões visuais também mudarão. Mas você pode evitar muita frustração e manter seu processo de design fluido, tornando seu sistema o mais dinâmico possível. Recomendamos usar uma ferramenta como o Figma, que permite modificar facilmente seu catálogo quando for necessário fazer pequenas mudanças ou ajustes.
Veja um exemplo de sistema de design usando Figma:
Wireframes
Em seguida, vêm os wireframes, que são esboços que servem para fornecer uma visão geral da estrutura do seu e-mail. Para ter mais flexibilidade na hora de misturar e combinar seções, sugerimos o uso de um sistema modular, que permite o uso de blocos de construção dinâmicos para crie uma variedade de modelos , permitindo que você cresça rapidamente ao oferecer novos e-mails usando a estrutura existente.
Depois de criar alguns modelos do seu e-mail a partir do wireframe e do texto/gráficos do espaço reservado, você terá modelos prontos para uso, personalizados de acordo com suas necessidades.
Seu wireframe deve ser semelhante a este:
Erros comuns ao criar e-mails
Existe um método para a loucura que é o design de e-mail — e algumas regras simplesmente não devem ser quebradas.
Aqui está uma lista de alguns erros que vemos com frequência:
-
E-mails longos que são cortados em certos clientes de e-mail (Gmail, estamos falando de você).
-
Não há compatibilidade com o modo escuro.
-
CTAs inconsistentes ou confusos.
-
Resposta ruim em dispositivos móveis (ou nenhuma).
-
Falta de conteúdo dinâmico.
-
Ideias de design que não combinam com a marca.
-
Fontes difíceis de ler ou não é seguro para e-mail .
Alguns de nossos clientes estão acostumados a usar editores de arrastar e soltar para criar seus e-mails, o que tem seus prós e contras. O lado positivo é que carregar imagens em um editor de e-mail em vez de usar código permite composições sofisticadas. Alguns editores também têm mais flexibilidade para utilizar fontes exclusivas. Por outro lado, às vezes esses e-mails não são responsivos para todos os clientes de e-mail. Pode haver problemas com a velocidade de carregamento das imagens, falta de suporte ao modo escuro, renderização ruim em dispositivos móveis e, às vezes, os e-mails podem simplesmente travar completamente em certos clientes. Esses editores simplesmente não são escaláveis.
É por isso que o objetivo deve ser sempre criar designs funcionais e adaptados às necessidades do seu público, o que inclui a otimização para diversos dispositivos e clientes de e-mail. O resultado é um design de e-mail profissional, único, escalável e fácil de usar.
Bem-vindo ao Lado Negro
Você sabia 82,7% dos usuários preferem o modo escuro ao modo claro ? E por bons motivos: o modo escuro reduz o cansaço visual, destaca mais o conteúdo e, portanto, facilita a concentração. Levando tudo isso em consideração, você deve criar uma versão escura complementar aos e-mails no modo claro e modificar os recursos no sistema de design para garantir que sejam renderizados corretamente. Você pode ver nos exemplos abaixo como o mesmo e-mail aparece nos modos claro e escuro:
Infelizmente, não é possível controlar completamente como o modo escuro será exibido em todos os clientes de e-mail, por isso, é importante lidar com quaisquer problemas relacionados ao modo escuro durante a fase de design. Aqui estão algumas boas práticas:
-
Garantir uma boa legibilidade do texto com linguagem simples, fontes adequadas para e-mail .
-
As cores devem ter um contraste equilibrado — evite cores saturadas.
-
Evite sombras e/ou componentes sobrepostos.
-
Dê um tratamento adequado a todos os elementos gráficos (imagens com fundos transparentes, ícones e logotipos com traços finos e brancos, etc.).
-
Certifique-se de que as preferências para gifs sejam ajustadas corretamente ao exportar para que a visualização fique correta.
Renderizando seu e-mail
Finalmente, chegamos à etapa "favorita" de todos os desenvolvedores de e-mail no processo de criação de e-mails: teste e renderização. Claro, você sabe como é importante testar qualquer aspecto da sua marca antes de enviá-la ao seu público, mas a renderização de e-mails é especialmente complexa — um único design pode ter cerca de 15.000 renderizações possíveis! A forma como seu e-mail é exibido depende do dispositivo, do cliente de e-mail e do tamanho da tela, bem como das diversas combinações entre esses três fatores.
Confira alguns exemplos abaixo para ver as diferenças entre dispositivos móveis, web e desktop.
O que procurar ao renderizar e-mails?
-
Links incorretos ou não rastreados
-
Erros de ortografia, gramática e pontuação
-
Imagens quebradas ou imagens sem texto alternativo
-
Problemas de fonte
-
Compatibilidade com o modo escuro
-
Capacidade de resposta em todos os tamanhos de tela
-
Problemas de formatação entre seções
Erros aparentemente pequenos em e-mails podem comprometer a confiança do público em uma marca, especialmente se esses problemas forem constantes. A última coisa que você quer que seu público pense é: "Se eles não conseguem enviar um e-mail simples, eu realmente deveria confiar no produto ou serviço deles?".
A entrega
Quando chega a hora de enviar seu e-mail para os desenvolvedores ou de codificar seus próprios e-mails, o Figma também torna o processo de transferência incrivelmente simples. Isso porque o Figma garante que seu design seja sempre transmitido de forma consistente e, como resultado, você pode codificar componentes totalmente reutilizáveis, economizando muito tempo.
O Figma também tem um recurso de layout automático que controla elementos como preenchimento e espaçamento e cria um design mais responsivo, especialmente porque ele pode traduzir esses elementos em código e exportar ativos exatos em qualquer formato que você precisar.
Ao projetar, há muito a ser considerado durante todo o processo criativo. Entre coletar informações para iniciar um projeto, criar layouts, inserir conteúdo e garantir que o conteúdo seja renderizado corretamente, é fácil se atrapalhar, mas agora você deve ter uma boa noção do que fazer e do que não fazer no design de e-mails.
No entanto, como projetar e criar e-mails é essencialmente o que fazemos todos os dias na Scalero, nossos designers e desenvolvedores são bastante habilidosos no processo. Se você precisa de mais orientação ou ajuda para criar seus próprios modelos de e-mail dinâmicos, envie-nos uma mensagem ou inscreva-se para o Aplicativo Tiramisu para começar!
