Banner de newsletter: ideias e exemplos de design
Procurando um guia sobre banners de e-mail? Então você veio ao lugar certo!
Os banners de newsletter são ótimos para chamar a atenção do público. Eles podem influenciar bastante a leitura e o apelo das suas campanhas de e-mail. Hoje vamos explicar o que são, para que servem e como fazer banners de newsletter, dar dicas práticas para criar os seus e mostrar como o Blocks pode ajudar.
O que é um banner de newsletter?
O banner de newsletter costuma ser o primeiro elemento visual que o leitor vê ao abrir o seu e-mail. É uma representação gráfica que dá o tom da newsletter, mais ou menos como a manchete de um jornal.
Os banners de e-mail geralmente trazem o logo da empresa, o título da newsletter (ou uma mensagem marcante que converse com o seu público) e imagens ligadas de alguma forma à sua marca. O segredo é fazer um banner intrigante, relevante e alinhado à identidade da marca.
Tamanho do banner de newsletter
No design de banners de e-mail, acertar o tamanho é essencial para que ele fique bom em todos os dispositivos e não ocupe espaço demais. Estes são os 2 tamanhos de banner de newsletter mais comuns:
• Banner de largura total. Esse banner costuma ocupar toda a largura do e-mail (normalmente 600px, a largura padrão de um e-mail). A maioria dos clientes de e-mail, do Gmail ao Outlook, suporta esse tamanho, o que garante que o banner apareça corretamente.
Já a altura do banner é flexível e costuma ficar entre 200px e 500px. Assim, ele continua chamando a atenção sem deixar de ser relativamente compacto. A escolha final depende do design do seu modelo: só garanta que o banner fique visualmente equilibrado dentro do layout como um todo.
Fonte: Really Good Emails
• Banner de meia largura. O banner de meia largura costuma ter cerca de 300px de largura. É uma ótima opção quando você quer que o banner divida espaço com outros elementos importantes, como texto ou imagens.
Na altura, os banners de meia largura seguem os mesmos princípios dos de largura total. O essencial é manter o equilíbrio visual: o banner não pode sufocar o e-mail, mas precisa ser grande o bastante para chamar a atenção.
Fonte: Really Good Emails
Os dispositivos móveis trazem outras questões. As telas costumam ser menores, então é importante garantir que o banner da newsletter se adapte bem e ofereça uma boa experiência no celular. Teste bem seus banners de e-mail e confira se eles se ajustam direitinho em diferentes dispositivos.
4 elementos para colocar no seu banner de e-mail
Um banner bem desenhado é mais do que uma imagem bonita. É uma combinação estratégica de vários elementos que, juntos, chamam a atenção do leitor e transmitem a sua mensagem principal.
Vamos ver 4 aspectos essenciais para considerar ao criar seus banners de e-mail.
Logo da marca ou da empresa
O logo identifica a sua marca na hora. Coloque-o em destaque no banner para reforçar o reconhecimento da marca entre clientes atuais e potenciais. Siga as suas diretrizes visuais, como paleta de cores e tipografia, para manter a consistência e a cara da marca do começo ao fim.
Fonte: Really Good Emails
Título chamativo
Um título envolvente é o anzol que fisga o público. Ele deve ser curto, atraente e ter relação direta com o conteúdo da newsletter. Um bom título desperta curiosidade, provoca emoção ou oferece algo de valor, incentivando o leitor a seguir em frente.
Fonte: Really Good Emails
Imagens relevantes
O apelo visual do banner é parte essencial da campanha. Use imagens de alta qualidade que tenham a ver com o conteúdo da newsletter e lembre-se sempre de que elas precisam combinar com os outros elementos do design.
Fonte: Really Good Emails
Chamada para ação (CTA)
Seja “Compre agora”, “Saiba mais” ou “Cadastre-se”, o CTA no banner de e-mail mostra ao público o próximo passo. Faça com que ele salte aos olhos com cores contrastantes, bastante espaço em branco e uma fonte fácil de ler. Garanta que o CTA esteja alinhado ao objetivo da newsletter e leve o leitor à ação desejada.
Fonte: Really Good Emails
10 ideias de design de banner de newsletter para se inspirar
E agora é hora de criar banners de e-mail de primeira para os seus modelos!
Seja para anunciar o lançamento de um produto, divulgar promoções ou compartilhar outras informações importantes na newsletter, estas 10 ideias de design de banner vão ajudar a turbinar a sua estratégia de e-mail marketing.
Brinque com as cores
As cores do banner não estão ali só para enfeitar: elas despertam emoções e fazem o e-mail se destacar. Use as cores da sua marca para manter a consistência ou experimente designs e paletas diferentes para dar um toque criativo aos seus modelos. Cores vibrantes, por exemplo, transmitem empolgação, enquanto tons mais sóbrios passam sofisticação.
Neste exemplo da Resy, o vermelho do banner combina com o logo, e o preto e o amarelo fazem o banner se destacar. Essa combinação dá um toque de ousadia e torna o e-mail chamativo logo de cara.
Fonte: Really Good Emails
Use a tipografia com inteligência
A tipografia pode influenciar muito a legibilidade e o clima do banner. Experimente combinar estilos e tamanhos de fonte diferentes para criar uma hierarquia visual e guiar o leitor. Só garanta que as fontes sejam legíveis e se complementem.
O exemplo abaixo mostra como usar fontes fora do comum sem deixar o banner difícil de ler. O resultado é um e-mail eficiente e agradável aos olhos.
Fonte: Really Good Emails
Destaque ofertas nos banners de e-mail
A sua marca está com ofertas especiais ou descontos? Destaque isso no banner para impulsionar as vendas! Use elementos que chamem a atenção e despertem interesse. Por exemplo, o seu banner pode ter:
- letras em negrito
- cores contrastantes
- linguagem envolvente
- números bem visíveis
A equipe da Glossier traz um dos melhores exemplos. A oferta especial aparece em destaque, e o banner funciona bem tanto no desktop quanto no celular.
Fonte: Really Good Emails
Anime o seu banner de e-mail
GIFs animados chamam a atenção e dão movimento ao banner. Seja um efeito de transição sutil ou um desenho animado completo, eles podem tornar o banner mais envolvente e memorável. Só garanta que a animação não desvie o leitor da mensagem principal.
Veja este exemplo bacana da Lyft. O GIF no banner não só deixa a mensagem divertida e vibrante, como também mostra o próprio produto.
Fonte: Really Good Emails
Conte uma história
Quem não gosta de uma boa história? Narrativas nos banners de e-mail reforçam a mensagem e envolvem os destinatários no lado emocional. Pense em criar uma sequência de imagens ou de textos no banner para contar uma história cativante sobre:
- a sua marca
- a linha de produtos ou o serviço apresentado no e-mail
- a data especial ligada à campanha
Este exemplo da Sauna House mostra toda a gama de sensações que você vai viver ao visitar a sauna. As imagens belíssimas garantem que os potenciais clientes se identifiquem facilmente com as pessoas das fotos.
Fonte: Really Good Emails
Mostre depoimentos
Nunca subestime o poder da prova social! Um comentário positivo de cliente no banner de e-mail aumenta a credibilidade e a confiança na sua marca.
Inclua um depoimento curto e convincente com o nome e a foto do cliente para dar autenticidade e criar um clima de confiança até entre os destinatários mais céticos! Claro, não se esqueça de pedir a permissão do cliente antes de usar a foto e o depoimento dele.
Aqui vai um ótimo exemplo da GoodRx: curto, mas cumpre seu papel com perfeição. Ele traz a avaliação de um cliente real com a foto dele, o que deixa o e-mail muito convincente.
Fonte: Really Good Emails
Inclua um timer de contagem regressiva
Quer divulgar ofertas por tempo limitado nos seus modelos? Coloque um timer de contagem regressiva direto no banner! Pequeno, mas eficiente, esse elemento mexe com o medo de ficar de fora, cria um senso de urgência e incentiva o leitor a agir rápido, antes que a oferta acabe.
Neste exemplo da AppSumo, o timer de contagem regressiva vem junto de uma chamada para ação clara e chamativa, que pede uma resposta imediata do leitor.
Fonte: Really Good Emails
Mostre seus produtos
Se você está lançando novos produtos ou serviços, coloque-os no banner. Use imagens de alta qualidade com um título envolvente e um CTA para:
- mostrar seus produtos ou serviços da melhor forma
- despertar a curiosidade dos clientes
- aumentar as conversões como resultado
Aqui vai um exemplo de banner da Loftie, que apresenta o relógio e a luminária da marca como a dupla perfeita para qualquer mesa de cabeceira (e mostra como os dois produtos ficam juntos).
Fonte: Really Good Emails
Temas sazonais
Campanhas sazonais podem ser uma ótima ideia para aumentar as vendas e o engajamento dos clientes. Adapte o banner às estações do ano, feriados ou eventos populares para deixar as suas newsletters oportunas e relevantes.
E o melhor: campanhas sazonais funcionam para muitos tipos de negócio! Por exemplo, aqui está um e-mail da Moment (um marketplace para fotógrafos e cineastas) que anuncia uma promoção de verão e traz uma imagem com clima de verão.
Fonte: Really Good Emails
Use infográficos
A última ideia para os seus banners de e-mail é usar infográficos para simplificar informações complexas e torná-las mais fáceis de digerir. Pense em incluir mini-infográficos no banner para compartilhar estatísticas ou novidades importantes sobre a sua marca ou o seu setor. Isso pode ser especialmente útil em newsletters B2B.
Aqui está um dos melhores exemplos de como usar essa dica. No e-mail abaixo, a Glassdoor usa números para dar mais força à mensagem.
Fonte: Really Good Emails
8 passos para criar um banner de newsletter incrível no Blocks
Do cabeçalho ao banner (e até a assinatura de e-mail), o Blocks oferece tudo o que você precisa para deixar seus modelos realmente marcantes. Com o nosso construtor de arrastar e soltar, criar o e-mail perfeito vira moleza!
Pronto para criar banners de e-mail incríveis? É só seguir estes 8 passos:
- Primeiro, adicione uma imagem ao e-mail. Vá até a seção “Elementos”, clique no botão “Imagem” e arraste-o para o seu modelo.
- Coloque o cursor no centro do elemento de imagem: vai aparecer um conjunto de ícones. Clique no ícone indicado para abrir o Centro de imagens.
- Aqui você pode enviar as suas próprias fotos, encontrar imagens na nossa biblioteca com centenas de opções gratuitas ou gerar uma imagem com IA para o seu e-mail.
- Vamos imaginar que você está criando um e-mail sobre um programa de indicação. Você não tem uma foto pronta, então precisa encontrar uma imagem que combine com a ideia.
Para isso, selecione a seção “Banco de imagens”, digite o que está procurando e escolha entre os resultados. Use os filtros para buscar fotos com uma orientação ou uma paleta de cores específica.
- Achou a foto perfeita? Ótimo! Agora é só clicar nela para adicioná-la ao modelo. Simples assim!
Se precisar editar a imagem, clique no ícone indicado aqui para abrir o Editor de imagens.
- A partir daqui, você pode personalizar a imagem como quiser: adicionar texto, redimensionar e recortar, arredondar os cantos e muito, muito mais!
- Aqui, decidi adicionar um CTA ao banner para deixá-lo mais atraente. Na seção “Texto”, você pode escolher a fonte, mudar a cor do texto e do fundo, adicionar sombras e fazer muitas outras coisas.
- Por fim, quando estiver satisfeito com o banner, clique no botão “Atualizar” e pronto: o seu modelo está preparado para brilhar!
P.S. Não gostou do resultado depois de adicionar o banner ao modelo? Volte ao Centro de imagens e faça os ajustes que quiser!
P.P.S. Se quiser caprichar ainda mais, dá até para adicionar sombra ao banner inteiro e mudar os cantos da foto no menu à direita.
Conclusão
Os banners de newsletter são um elemento essencial da sua estratégia de e-mail marketing. Eles deixam a newsletter mais atraente e aumentam o engajamento dos leitores. Não se esqueça: um banner eficiente precisa ser bonito e estar alinhado à sua marca e ao objetivo do e-mail.
Com o Blocks, você pode soltar a criatividade nos seus banners de e-mail. A nossa ferramenta é o lugar perfeito para testar tamanhos de banner, incluir os elementos necessários e criar modelos caprichados que deixam uma impressão duradoura nos leitores.