A versão curta
- O branding no Twitter (X) assenta em quatro elementos visuais: o avatar, o cabeçalho de 1500×500, as imagens das publicações e os cartões de ligação que o teu site produz.
- O avatar aparece ao lado de cada publicação e resposta, por isso deve ser um símbolo simples ou um retrato fechado que se leia em tamanho muito pequeno.
- As imagens de publicações no X funcionam melhor a 1600×900 em horizontal ou a 1080×1350 em vertical.
- Os cartões de ligação vêm das meta tags do teu site, por isso uma imagem Open Graph de 1200×630 com o aspeto da tua marca torna reconhecível cada ligação partilhada.
- Usar a mesma família de fundos no cabeçalho, nas imagens das publicações e nos cartões de ligação une publicações dispersas numa marca visível.
Nesta página
O branding no Twitter (X) resume-se a quatro elementos visuais que controlas: o avatar ao lado de cada publicação, o cabeçalho de 1500×500 no teu perfil, as imagens que anexas às publicações e os cartões de ligação que o teu próprio site produz quando alguém o partilha. Na maior parte das vezes as pessoas encontram-te como um pequeno círculo e poucas linhas de texto num feed veloz. Por isso cada elemento tem de ser simples, e os quatro têm de parecer vir do mesmo sítio.
O teu kit de marca para o X num relance
Onde as pessoas o veem
Tamanho
Onde as pessoas o veem
Tamanho
Onde as pessoas o veem
Tamanho
Onde as pessoas o veem
Tamanho
Onde as pessoas o veem
Um avatar que sobrevive à cronologia
O teu avatar é a imagem mais repetida que tens. Aparece ao lado de cada resposta, nas notificações e nas citações de outras pessoas, muitas vezes mais pequeno do que uma unha. Um logótipo completo com wordmark desaparece nesse tamanho. Usa um único símbolo, um monograma ou um retrato fechado de cabeça e ombros, sobre um fundo liso ou suavemente iluminado na cor da tua marca. Mantém-no igual em todas as plataformas, para quem te segue noutro lado te reconhecer logo.
Desenhar o cabeçalho do X
O cabeçalho tem 1500×500, uma faixa 3:1. O avatar sobrepõe-se ao canto inferior esquerdo, e ecrãs diferentes cortam ligeiramente o topo e a base, por isso mantém as palavras na faixa do meio e longe desse canto. Funciona melhor uma só linha: o que fazes, o que estás a construir ou a única coisa que queres que um visitante retenha. Fixa uma publicação que a desenvolva. O tamanho do cabeçalho do X tem as zonas seguras em detalhe.
Uma linha, colocada ao centro à direita, sobre o mesmo fundo que a conta usa em todas as imagens de publicações.
Trata a publicação fixada como a segunda metade do cabeçalho. Um visitante lê a linha no cabeçalho, espreita a bio e vê logo por baixo a publicação fixada. Faz dela a melhor introdução curta ao que fazes, com uma imagem do mesmo aspeto, e renova-a quando tiveres algo melhor para mostrar. Algumas que funcionam bem:
- Uma introdução numa imagem: quem és, o que fazes, o que esperar se te seguirem.
- O teu melhor fio, com uma imagem de capa numerada para se ler como uma série.
- Um lançamento ou oferta atual, substituído assim que acabar, para nunca ficar desatualizado.
Imagens de publicações com o teu aspeto
A maioria das publicações no X são palavras, e devem continuar a sê-lo. Acrescenta uma imagem quando ela faz um trabalho: enquadra uma linha-chave, mostra um resultado, anuncia algo ou leva um gráfico. Quando o fizeres, usa um pequeno conjunto de layouts sobre uma família de fundos para as pessoas aprenderem a reconhecê-los a meio do scroll.
Um cartão de novidades horizontal a 1600×900. Um número, uma linha de contexto.
Um cartão de citação vertical a 1080×1350, que ocupa mais do ecrã do telemóvel.
Mantém a letra grande: as pessoas leem o X em telemóveis, e a cronologia mostra as imagens mais pequenas do que as desenhaste. Duas ou três palavras por linha, uma ideia por imagem. O design de imagens para o X e os gráficos para fios do X trazem mais layouts, incluindo imagens numeradas para fios longos.
Os cartões de ligação fazem parte da tua marca
Sempre que alguém partilha o teu site no X, o cartão que aparece vem das meta tags da tua página. Sem elas, o X mostra uma ligação simples ou um recorte aleatório. Com uma imagem de 1200×630 com o aspeto da tua marca, cada partilha, mesmo as que nunca vês, leva o teu aspeto para a cronologia. O X lê primeiro as suas próprias tags twitter: e recorre ao Open Graph.
<meta name="twitter:card" content="summary_large_image">
<meta property="og:title" content="Small tools for big spreadsheets">
<meta property="og:description" content="Import, clean and merge files in seconds.">
<meta property="og:image" content="https://example.com/og/home.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">Desenha a imagem da ligação como um pequeno cartaz: título da página, uma linha curta, o fundo da tua marca e margens generosas, porque o X arredonda os cantos. O tamanho da imagem Open Graph trata de testes e cache.
Erros de branding no Twitter a evitar
Evita
- Um logótipo detalhado como avatar
- Um cabeçalho atulhado com slogan, handle e site
- Palavras no canto inferior esquerdo do cabeçalho
- Capturas de ecrã com texto minúsculo como imagens de publicações
- Deixar os cartões de ligação ao acaso
Faz
- Um símbolo ou retrato simples, mantido durante anos
- Uma linha clara sobre o fundo da marca
- Texto ao centro ou à direita do centro
- Letra grande, duas ou três palavras por linha
- Um cartão desenhado de 1200×630 para cada página-chave
A forma mais simples de manter as cinco peças alinhadas é fazê-las a partir de um só design. No Gradiently podes desenhar uma vez sobre um Mark e, com o Pro, redimensionar para todos os formatos num só passo, para que o cabeçalho, os cartões das publicações e a imagem da ligação partilhem a mesma luz e cor. O Mark abre espaço para as tuas palavras em todos os tamanhos, o que conta numa faixa 3:1 onde há muito pouco espaço. Para a visão multiplataforma, lê marca coerente nas redes sociais.
Perguntas frequentes
Que tamanho tem o cabeçalho do X (Twitter)?
1500×500 píxeis, uma proporção 3:1. Mantém as palavras na faixa do meio e longe do canto inferior esquerdo, onde fica o avatar.
Que tamanho devem ter as imagens das publicações no X?
1600×900 em horizontal ou 1080×1350 em vertical. As imagens verticais ocupam mais espaço nos telemóveis.
O meu avatar do X deve ser um logótipo ou uma fotografia?
O que se ler com clareza num pequeno círculo: um símbolo simples, um monograma ou um retrato fechado. Evita logótipos detalhados e texto pequeno.
Como controlo a imagem quando o meu site é partilhado no X?
Acrescenta uma tag twitter:card com o valor summary_large_image e uma imagem Open Graph de 1200×630 píxeis ao head de cada página.
Como posso fazer o meu perfil do X parecer mais profissional?
Usa o mesmo avatar simples em todo o lado, um cabeçalho com uma linha clara e imagens de publicações que partilhem uma família de fundos e um tipo de letra.
Escrito pela Gradiently
A equipa por trás da Gradiently, uma ferramenta de design construída em torno dos Marks: gradientes vivos que fazem tudo o que crias parecer teu.
Ver o nosso perfil