Linha de assunto - Como abordar o design de e-mail

Uma porcentagem significativa de consumidores — 99% — verifica seus e-mails todos os dias. Alguns dados demográficos, incluindo a geração do milênio, preferem as comunicações por e-mail de empresas a outras formas de comunicação, como telefonemas ou mensagens de texto. E com mais de 5 bilhões de contas de e-mail ativas em todo o mundo, o e-mail é uma parte essencial de qualquer estratégia de produto digital.

Embora existam milhares de designs de modelos de email disponíveis para profissionais de marketing, o design de email é uma importante área de especialização para web designers. Isso é especialmente verdadeiro para aqueles que desejam trabalhar com marcas maiores, empresas criativas e outras que evitam modelos.

Há várias coisas que os designers devem ter em mente ao projetar e-mails, desde as limitações da maioria das plataformas de e-mail (com suporte limitado para coisas como fontes da web de um dos maiores – o Gmail), bem como o que os consumidores esperam ao abrir um e-mail de um empresa com a qual eles já podem fazer negócios.

A importância do design de e-mail móvel

Com pelo menos metade de todos os emails sendo abertos e lidos em dispositivos móveis, é irresponsável que os designers ignorem designs de email compatíveis com dispositivos móveis. Especialmente considerando que as taxas de conversão de e-mail móvel tendem a ser significativamente maiores do que as taxas de desktop.

Este design de e-mail móvel da PiperJaffray mantém as coisas simples e elegantes. É fácil de ler em um dispositivo móvel, com links limpos e branding sutil. Ele coloca as necessidades do usuário em primeiro lugar, melhorando a experiência geral do usuário e a percepção da empresa.

O Dribbble mantém seu e-mail “Fotos populares” direto ao ponto, focando inteiramente no conteúdo. Esse foco torna o e-mail fácil de navegar em dispositivos móveis. Embora um layout simples que se concentre no conteúdo seja uma boa ideia para muitos tipos de e-mails, ele é particularmente adequado para e-mails móveis, onde torna mais fácil consumir o conteúdo e interagir com ele.

Foco no conteúdo

Como prática recomendada, seja projetando e-mails ou outros produtos digitais, os designers devem sempre se concentrar no conteúdo. Alguns designs de email levam essa prática recomendada ao extremo com design minimalista, onde o conteúdo é o design.

Ao trabalhar na maioria dos designs de email, os designers se beneficiam de ter o conteúdo criado antes de mergulhar no design. No entanto, particularmente em designs minimalistas, é ainda mais importante saber qual será o conteúdo inicial.

A Marvel coloca o foco diretamente em seu conteúdo com um design minimalista. O fundo branco e as imagens que suportam apenas o texto da página fazem com que o conteúdo realmente se destaque.

Todos os e-mails do Unsplash focam diretamente nas imagens que estão promovendo. O botão “Visualizar coleção” e o fade na parte inferior das imagens podem aumentar os cliques no site, pois deixa as pessoas querendo ver mais.

Reforçando a marca

Quando um visitante chega a um site, é (idealmente) uma experiência de branding imersiva. Tudo está sob o controle do designer do site. Mas o design de e-mail é diferente. O usuário está visualizando os e-mails em outro aplicativo e nem todos os aplicativos de e-mail renderizam todos os e-mails igualmente.

Por isso, o branding nos designs de e-mail é vital para criar a experiência certa para o usuário que lê o e-mail. No entanto, a marca geralmente precisa ser simples para renderizar de maneira eficaz em vários dispositivos e clientes de e-mail para a maior porcentagem de usuários.

Um logotipo simples na parte superior do e-mail, usando as mesmas imagens de cabeçalho em várias imagens e mantendo tantos elementos consistentes de outros produtos digitais da marca, ajuda bastante a apoiar e reforçar a percepção da marca para os consumidores.

A marca da Everlane é inerentemente simples em seus e-mails e sites. Seu logotipo exibido com destaque na parte superior deste e-mail reforça essa marca.

O Middle Finger Project usa uma imagem de cabeçalho consistente em todos os seus e-mails, juntamente com a cor de destaque roxa brilhante. Isso torna seus e-mails imediatamente reconhecíveis para qualquer pessoa que se inscreva, e a marca continua no site.

Chamando a atenção com cores

A cor tem um forte impacto na mente humana, com a capacidade de influenciar emoções, percepções e até mesmo o comportamento. O uso eficaz de cores em e-mails pode aumentar as taxas de cliques e de conversão. Em alguns testes, a diferença na cor do botão pode fazer mais de 20% de diferença nas taxas de conversão.

Mas não são apenas as chamadas à ação que se beneficiam do uso de cores. Criar um e-mail colorido pode ser diferente do esperado e criar uma aparência totalmente diferente de outros e-mails na caixa de entrada de uma pessoa.

Chamar a atenção para um banner de venda com vermelho brilhante lembra os sinais de venda da vida real, que muitas vezes também são feitos na mesma cor. O olho do leitor é imediatamente atraído para o vermelho.

Article, um site de comércio eletrônico de móveis escandinavos, emprega um esquema de cores vermelho e verde suave, com o vermelho chamando a atenção para a parte mais importante - o botão de call-to-action de venda.

Enquanto alguns designs de email usam cores como forma de chamar a atenção para uma parte específica do conteúdo, este email do Houston Zoo usa cores brilhantes para criar um design divertido e energético. O esquema de cores laranja brilhante e rosa quente é imediatamente atraente e atrai o leitor.

Usando imagens impressionantes

Os seres humanos são criaturas visuais e imagens impressionantes podem elevar um e-mail e chamar a atenção do leitor. As imagens também podem reforçar a mensagem do e-mail e a marca da empresa.

Os programas de TV parecem ter uma vantagem na categoria “imagens impressionantes”, com este e-mail da Netflix usando uma foto vibrante e misteriosa de Stranger Things . Combinar a imagem atraente com a chamada à ação “Play” imediatamente abaixo faz sentido do ponto de vista do UX, pois simplifica para os leitores assistir imediatamente ao programa promovido.

Imagens impressionantes não se restringem apenas a fotos. Um desenho ou ilustração como os que a WePresent usa em seus e-mails é tão atraente quanto uma foto e pode ajudar a atrair os leitores para o conteúdo.

Este e-mail do Deadliest Catch , promovendo a série de documentários do Discovery Channel, exibe uma imagem de cabeçalho impressionante que se funde com o conteúdo abaixo. Esta é uma técnica útil que incentiva o espectador a continuar lendo.

Experimentando layouts não convencionais

Muitos designs de email têm um formato bastante padrão: cabeçalho na parte superior, conteúdo de coluna única, com chamadas para ação perto da parte superior e inferior. Mas não há nenhuma regra que diga que os designers precisam seguir esse padrão específico.

Layouts não convencionais são uma ótima maneira de chamar a atenção do leitor e fazê-lo querer ler o conteúdo. Há uma variedade de maneiras de criar designs incomuns. Um método popular é usar imagens para criar layouts de e-mail que não seriam necessariamente compatíveis com muitas plataformas de e-mail.

Layouts não convencionais não precisam necessariamente estar fora da parede. Este, do Mailchimp, usa um design de duas colunas com uma coluna ocupada por blocos de cores. O que o torna memorável é que é visualmente atraente e inesperado.

O uso de imagens permite layouts de e-mail mais inesperados como este para a KLM. Os designers só precisam ter em mente que alguns clientes de e-mail ainda bloquearão o carregamento automático de imagens, tornando necessário ter um texto substituto que ainda transmita a essência da mensagem.

Trabalhando com fontes

Os clientes de e-mail mais populares suportam fontes da web, mas, infelizmente, nem todos o fazem – o Gmail é a exceção mais notável (embora o Gmail suporte Roboto e Google Sans como parte da interface do Gmail). No entanto, os designers ainda podem usar fontes da Web, desde que tenham em mente que um grande número de clientes de e-mail usará fontes de reserva.

A alternativa ao uso de fontes da Web, é claro, é usar imagens que incluam as fontes. Isso é o que muitos designers de e-mail optam por fazer, especialmente em cabeçalhos onde as fontes de fallback provavelmente pareceriam deslocadas.

Este boletim informativo FabFitFun usa uma fonte de script divertida para chamar a atenção para o conteúdo, ao mesmo tempo em que o combina com um tipo de letra sans serif altamente legível. Experimentar combinações de fontes em designs de e-mail é uma ótima ideia e pode até ser usado como teste antes de alterar os tipos de letra em um site ou usá-los em outros materiais de marca.

O Sickbubble usa uma variedade de fontes em seu design de e-mail, o que pode ser complicado. Mas neste caso, porque eles separam cada seção, funciona. A fonte de exibição no cabeçalho tem uma sensação muito ousada, enquanto o texto do corpo principal é fácil de ler sem serifa. As fontes manuscritas na seção de promoção do produto funcionam, pois estão deslocadas do corpo do e-mail.

Se divertindo com animações

As animações adicionam interesse visual extra aos e-mails e atraem imediatamente a atenção do leitor. GIFs animados são uma escolha popular para adicionar movimento a e-mails e são suportados pela maioria dos clientes de e-mail.

Os designers devem ter em mente os tamanhos dos arquivos ao incorporar qualquer animação, já que muitas pessoas leem e-mails em dispositivos móveis. Eles também devem garantir que as animações suportem o conteúdo e não sejam apenas preenchimento.

Usar GIFs animados para enfatizar ou ilustrar melhor o conteúdo apresentado de maneira divertida é uma adição fantástica a um design de e-mail, como neste exemplo de e-mail do Product Hunt.

The Hustle usa um GIF animado em seus e-mails para ilustrar o ponto da mensagem e adicionar interesse visual a um design de e-mail minimalista.

Chamadas à ação

A chamada para ação é sem dúvida a parte mais importante de quase todos os e-mails que uma empresa envia. A maioria dos e-mails é enviada para ação imediata, seja lendo um artigo, comprando um produto ou realizando algum outro comportamento.

Os designers são bem servidos para prestar muita atenção ao design de seus apelos à ação, bem como para realizar testes A/B neles para garantir que sejam otimizados para o desempenho.

Usar uma cor brilhante para a chamada à ação, como o Litmus fez aqui, faz com que ela se destaque do restante do conteúdo. Os designers devem considerar experimentar cores diferentes para ver quais funcionam melhor para seu público, empregando testes A/B ao enviar campanhas de e-mail.

Usar uma cor totalmente diferente do restante do conteúdo de um e-mail para o call to action faz com que ele se destaque. Como o verde-limão no e-mail do Campaign Monitor é uma cor complementar ao roxo que compõe o plano de fundo, ele se destaca sem colidir.

Preste atenção às melhores práticas de design de e-mail

Embora haja muito espaço para criatividade e experimentação no design de e-mail, os designers também precisam ter em mente as melhores práticas e limitações do meio.

Uma das etapas mais importantes no design de e-mail é testar e-mails em várias plataformas de e-mail antes de enviá-los. Embora seja provável que haja pequenas variações entre eles e sempre haja pessoas que usarão plataformas menos comuns que renderizam designs de maneira diferente, é inteligente garantir que os e-mails sejam exibidos de forma aceitável para a maioria dos usuários.

Existem vários designers de serviços de teste de e-mail que podem ser usados ​​para ver como seus e-mails serão exibidos em uma variedade de plataformas de e-mail. Litmus é uma das mais populares, mas também vale a pena conferir outras opções como Mailgun, Email on Acid, Mailtrap e Preview My Email para ver qual atende melhor às necessidades de cada projeto.

Além disso, ter em mente o tamanho das imagens e o uso da largura de banda é essencial devido ao número de e-mails abertos em dispositivos móveis. Designs responsivos são praticamente uma necessidade pelo mesmo motivo.

Os melhores designs de e-mail serão fáceis para as pessoas lerem em qualquer dispositivo e, o mais importante, solicitarão que cliquem na chamada para ação no e-mail (ou executem qualquer ação solicitada). Seguir essas práticas recomendadas de design de e-mail oferece aos web designers uma vantagem na criação de e-mails que fazem isso de maneira eficaz.

• • •

Leia mais no Blog Toptal Design:

• Experiência é tudo – o melhor guia de UX
• Todas as tendências valem a pena? Os 5 erros mais comuns de UX que os designers cometem
• UI vs. UX – Explore as principais diferenças [Infográfico]
• Princípios e práticas recomendadas de design de UX para dispositivos móveis
• O guia fundamental para usabilidade em dispositivos móveis