# Design de assinatura de e-mail: banners de 600×200 leves

[Canonical HTML page](https://gradiently.design/pt-br/guide/email-signature-design)

Sua assinatura vai em todo e-mail que você envia, o que a torna o design mais visto que você tem. Veja como fazer uma que pareça bem pensada, carregue rápido e nunca vire um clipe de anexo.

## The short version

- Um bom design de assinatura de e-mail mantém nome, cargo e contatos como texto e acrescenta no máximo um banner pequeno em imagem.
- Um banner de assinatura funciona bem com 600×200 pixels, uma faixa de proporção 3:1 que cabe até nos layouts de e-mail mais estreitos.
- Exportar o banner em dobro, 1200×400, e exibi-lo com 600 pixels de largura mantém a nitidez em telas de alta densidade.
- Muitos clientes de e-mail bloqueiam imagens até o leitor permitir, então nada essencial deve existir só dentro do banner.
- Uma imagem hospedada com endereço https completo mantém cada e-mail leve, enquanto uma imagem colada costuma ser enviada como anexo em cada mensagem.

Um bom **design de assinatura de e-mail** é, em grande parte, contenção: seu nome, cargo e uma ou duas formas de contato como texto de verdade e, depois, um banner pequeno de 600×200 pixels que carrega a sua marca. Mantenha o banner leve, ligue-o a uma única página e nunca coloque seu telefone ou e-mail só dentro da imagem, porque muitas caixas de entrada escondem imagens até o leitor dizer o contrário.

## O que entra numa assinatura de e-mail

Uma assinatura tem duas funções: dizer quem você é e como falar com você, e lembrar o que você faz. A primeira função é texto. A segunda pode ser um banner. O que passar disso é ruído que as pessoas aprendem a ignorar.

| Elemento | Formato | Observações |
| --- | --- | --- |
| Nome | Texto, em negrito | A única coisa que deve ser maior |
| Cargo e empresa | Texto | Uma linha, separados por vírgula |
| Telefone ou link de agendamento | Link em texto | Uma forma principal de agir, não quatro |
| Site | Link em texto | Curto e legível, sem `https://` |
| Banner | Imagem, 600×200 | Opcional; leva a uma única página |
| Ícones de redes sociais | Imagens pequenas | No máximo dois ou três, ou nenhum |

Primeiro o texto, depois a imagem. Se nenhuma imagem carregasse, a assinatura ainda deveria funcionar.

## Tamanho e peso do banner de assinatura de e-mail

Crie o banner com 600×200 pixels, uma faixa 3:1. Seiscentos pixels é a largura em torno da qual os templates clássicos de e-mail são feitos, então um banner desse tamanho cabe no app de e-mail do celular e no painel de leitura do computador sem ser redimensionado. Para telas de alta densidade, exporte o mesmo design em dobro, 1200×400, e peça ao e-mail que o mostre com 600 pixels de largura.

- Banner de assinatura 600×200: 600 × 200
- Cabeçalho de e-mail 1200×600: 1200 × 600
- Cartão de visita 1050×600: 1050 × 600

Um banner de assinatura ao lado de um cabeçalho de newsletter e de um cartão de visita, em escala. O banner é uma faixa fina, não um pôster.

O peso importa mais do que parece, porque a imagem viaja em cada resposta de uma conversa longa. Procure manter o arquivo bem abaixo de 100 KB. Um banner em gradiente exporta muito bem como JPEG de alta qualidade; use PNG só quando precisar de transparência ou de letras muito finas. Se você também faz newsletter, o guia de [design de cabeçalho de e-mail](https://gradiently.design/pt-br/guide/email-header-design) cobre o formato maior.

## Como desenhar o banner

Um banner visto cem vezes por semana deve dizer uma coisa só e dizer com calma. Funciona melhor como uma promoção discreta: seu próximo evento, um serviço novo, um link de agendamento ou simplesmente o visual da sua marca com uma frase curta. Troque as palavras conforme a estação e mantenha o fundo.

Um banner fino de assinatura de e-mail para um estúdio de fotografia, com o texto Agendas de casamento de primavera abertas sobre um gradiente suave

Um banner de fotógrafo: uma frase atual e o nome do estúdio.

Um banner de assinatura de e-mail anunciando um webinar gratuito em 12 de novembro

Uma consultoria divulgando um evento. Quando acabar, troque a frase.

### Evite

- Contatos só dentro da imagem
- Um banner de várias centenas de kilobytes
- GIFs animados que repetem para sempre
- Citações, avisos legais e cinco ícones de redes sociais
- Texto cinza pequeno que some no modo escuro

### Faça

- Nome e links como texto
- Um banner leve de 600×200, abaixo de 100 KB
- Uma imagem estática, ou no máximo um loop suave
- Uma só chamada para ação
- Um banner com fundo próprio, que se lê tanto no modo claro quanto no escuro

O modo escuro é uma armadilha real. Alguns apps de e-mail invertem ou escurecem cores claras, então um logo sobre fundo transparente pode sumir numa caixa de entrada escura. Um banner que carrega seu próprio fundo completo, como um gradiente rico, fica igual nos dois modos. [Design para modo escuro](https://gradiently.design/pt-br/guide/dark-mode-design) e [gradientes em e-mail](https://gradiently.design/pt-br/guide/gradients-in-email) aprofundam como os clientes tratam a cor.

## HTML para uma assinatura de e-mail que não quebra

Os clientes de e-mail são antiquados com layout, então as assinaturas são feitas com tabelas simples e estilos em linha. Esta funciona nos clientes mais comuns: cole em um arquivo HTML, abra no navegador, selecione tudo e copie para as configurações de assinatura do seu app de e-mail.

```html
<table cellpadding="0" cellspacing="0" border="0" style="font-family: Arial, Helvetica, sans-serif; color: #1f2937;">
  <tr>
    <td style="padding-bottom: 8px;">
      <strong style="font-size: 15px;">Maya Okafor</strong><br>
      <span style="font-size: 13px;">Founder, Studio Alder</span><br>
      <a href="https://example.com/book" style="font-size: 13px; color: #1f2937;">Book a call</a>
      &middot;
      <a href="https://example.com" style="font-size: 13px; color: #1f2937;">example.com</a>
    </td>
  </tr>
  <tr>
    <td>
      <a href="https://example.com/weddings">
        <img src="https://example.com/email/banner-1200x400.jpg"
             width="600" height="200" alt="Studio Alder: now booking spring weddings"
             style="display: block; border: 0; max-width: 100%; height: auto;">
      </a>
    </td>
  </tr>
</table>
```

Dados como texto, um banner hospedado exibido em 600×200 a partir de um arquivo de 1200×400, com texto alternativo que ainda faz sentido se as imagens forem bloqueadas.

> **Hospede a imagem, não cole** Quando você cola ou envia uma imagem direto na assinatura, alguns apps de e-mail a mandam como anexo em cada mensagem, o que aparece como um clipe e enche as caixas de entrada. Ligar a uma imagem no seu próprio site, com um endereço https completo, evita isso.

## Configurando sua assinatura, passo a passo

1. **Escreva o bloco de texto** Nome, cargo e empresa, um link para agir, seu site. Leia em voz alta e corte o que você não diria.
2. **Crie o banner em 600×200** Use o fundo da sua marca e uma frase curta. Deixe as palavras no meio, com espaço nas duas pontas.
3. **Exporte em 1200×400** JPEG de alta qualidade para gradientes e fotos, PNG para transparência. Confira se o arquivo tem menos de 100 KB.
4. **Envie para o seu site** Coloque numa pasta estável, como `/email/`, para o endereço nunca mudar e os e-mails antigos manterem o banner.
5. **Monte e cole o HTML** Adapte o código acima, defina a largura como 600, escreva um texto alternativo de verdade e cole no seu app de e-mail.
6. **Teste direito** Envie para um endereço do Gmail e outro do Outlook, abra no celular, ative e desative o modo escuro e responda à conversa duas vezes.

## Como manter as assinaturas de uma equipe consistentes

As assinaturas se desviam: uma pessoa acrescenta uma citação, outra usa o logo do ano passado. Dê à equipe um template HTML e um banner e troque o banner de forma centralizada quando a mensagem mudar. A mesma disciplina descrita em [consistência de marca](https://gradiently.design/pt-br/guide/brand-consistency) vale aqui, em menor escala.

O Gradiently tem o tamanho Assinatura de e-mail de 600×200 pronto no Studio, e um tamanho personalizado de 1200×400 cobre a exportação em alta densidade. As exportações gratuitas levam uma pequena marca d’água, então um banner limpo exige o Pro, que também traz o kit de marca: logo, cores e fontes num só lugar. O Mark por trás do banner é o mesmo das suas publicações em redes sociais e dos [cartões de visita](https://gradiently.design/pt-br/guide/business-card-design), então uma resposta na caixa de entrada de alguém tem inconfundivelmente a cara do resto da sua marca.

## FAQ

### Qual deve ser o tamanho de um banner de assinatura de e-mail?

Crie com 600×200 pixels. Exporte em 1200×400 e defina a largura da imagem como 600 para manter a nitidez em telas de alta densidade.

### Qual o tamanho ideal do arquivo de imagem de uma assinatura de e-mail?

Mantenha bem abaixo de 100 KB. A imagem é enviada ou carregada com cada e-mail e cada resposta, então um arquivo pesado se acumula rápido.

### Por que a imagem da minha assinatura aparece como anexo?

Alguns apps de e-mail anexam a cada mensagem as imagens coladas ou enviadas. Hospede a imagem no seu site e faça o link com um endereço https completo.

### Devo colocar meu telefone na imagem da assinatura?

Não. Muitos clientes de e-mail bloqueiam imagens por padrão, e o texto dentro de uma imagem não pode ser tocado nem copiado. Mantenha os contatos como texto.

### Posso usar um GIF animado na assinatura de e-mail?

Pode, mas mantenha pequeno e sutil. Uma animação em loop em cada e-mail de uma conversa longa logo vira distração, e alguns clientes mostram só o primeiro quadro.