Princípios de composição para gráficos de redes sociais
Como compor uma publicação para que as pessoas leiam primeiro o que importa: hierarquia, grelha, espaço em branco e ênfase, em quatro modelos reais em tamanho nativo.
A nossa recomendação: para compor uma publicação de modo a que as pessoas leiam primeiro o que importa, dê a um elemento claramente mais peso do que a todos os outros e depois alinhe e espace o resto para o apoiar. Resume-se a quatro princípios: hierarquia, grelha, espaço em branco e ênfase.
Os princípios abaixo são a nossa recomendação para gráficos de redes sociais, assentes em investigação sobre interfaces. Sempre que um número ou uma definição vem de uma fonte, há uma ligação. Ilustramos cada princípio com um modelo gerado pelo motor do Chikaboom a partir da nossa marca de demonstração AURORA, em tamanho nativo.
O que significa, afinal, «ler primeiro o que importa»?
O Nielsen Norman Group define a hierarquia visual como a disposição dos elementos de modo a que o olhar os percorra pela ordem de importância pretendida. Numa publicação de redes sociais, quem decide essa ordem, antes do espectador, é quem publica. As pessoas encontram a sua imagem a meio do scroll, por isso o primeiro elemento em que pousam o olhar é o que decide se param.
A investigação sobre o padrão em F do NN/g concluiu que os leitores de páginas web percorrem uma barra superior, uma segunda barra mais curta e depois descem pela margem esquerda, e que raramente leem palavra a palavra. Esse estudo abrange páginas web com muito texto, não imagens de feed. O nosso pressuposto, que esse estudo não testou em imagens, é que o mesmo hábito se mantém em gráficos de feed: ponha a ideia principal no canto superior esquerdo do bloco de texto e coloque as palavras importantes logo no início.
Use o teste de semicerrar os olhos do mesmo artigo do NN/g: desfoque o seu design, ou afaste-se do ecrã, e veja o que continua a destacar-se. Se não for o que pretendia, altere a composição, não o texto.
Princípio 1: Como funciona a hierarquia numa única publicação?
No nosso resumo do artigo do NN/g, a hierarquia nasce da escala, do contraste e do agrupamento. A orientação do NN/g é não ultrapassar três variações de tamanho nem dois elementos de grande dimensão. A nossa recomendação para uma publicação de 1080 px são três níveis: um título, uma linha de apoio e uma pequena etiqueta.
Nesta composição de estilo suíço, o título é o único elemento grande. A etiqueta e os metadados ficam muito abaixo em tamanho, por isso o teste de semicerrar os olhos devolve uma só mancha: o título. Os elementos pequenos não estão ali para competir. Respondem a «o que é isto» e «quanto tempo demora».
Princípio 2: Porquê usar uma grelha para uma única imagem?
Uma grelha é uma unidade repetida que decide onde as coisas podem ficar. O Material Design 3 constrói o seu espaçamento numa escala de 8dp e distingue o preenchimento (dentro de um elemento), os intervalos (entre elementos) e as margens (fora deles). Aplicar a ideia a uma publicação de redes sociais é uma recomendação nossa, não uma regra de plataforma: escolha uma unidade, como 24 ou 40 px a 1080, e use apenas múltiplos dela.
A composição editorial mostra a vantagem. A etiqueta de categoria, o título e a assinatura partilham a mesma margem esquerda, e os intervalos entre eles repetem-se. Nada parece colocado a olho, por isso o olhar desce pela pilha sem andar à procura. A mesma margem esquerda também se ajusta ao hábito de leitura a partir do canto superior esquerdo descrito acima.
Princípio 3: Quanto espaço em branco é suficiente?
O NN/g descreve o espaço em branco como uma forma de equilibrar um design e de o tornar mais fácil de percorrer e de ler, e recomenda um sistema de espaçamento consistente juntamente com o princípio da proximidade. O seu artigo sobre proximidade acrescenta que os itens próximos uns dos outros são percebidos como um grupo e que isso pode sobrepor-se à semelhança de cor ou de forma.
Para uma publicação, daqui resulta uma regra simples nossa: o espaço dentro de um grupo deve ser claramente menor do que o espaço entre grupos. Um valor estatístico e a sua etiqueta pertencem juntos, por isso mantenha-os próximos. Separe-os da nota de rodapé.
O cartão de dados põe o número e a sua etiqueta num só grupo, com muito espaço à volta. A nota de rodapé é pequena e fica afastada. O número neste cartão é uma ilustração de composição, não um resultado medido.
Princípio 4: Como dar ênfase a uma só coisa sem gritar?
Na nossa abordagem, a ênfase é a hierarquia levada ao limite: um elemento, um tratamento. O NN/g também aconselha a limitar a paleta a poucas cores e a não depender só da cor, o que importa para a acessibilidade. Veja contraste de cor nas redes sociais e WCAG para os rácios.
O testemunho é ruidoso de propósito, mas continua a ter apenas uma coisa ruidosa. O estilo é uma escolha de peso e de arestas, e a hierarquia por baixo é a mesma da composição suíça mais calma: um elemento focal e uma pequena linha de apoio. Para escolhas de tipografia que transmitem ênfase, veja tipografia para publicações em redes sociais.
Qual é uma lista de verificação rápida de composição?
| Verificação | A nossa regra prática | Princípio |
|---|---|---|
| Teste de semicerrar os olhos | Um elemento sobrevive ao desfoque | Hierarquia |
| Tamanhos de texto | Dois ou três, não mais | Hierarquia |
| Margem esquerda | Etiqueta, título e assinatura partilham-na | Grelha |
| Unidade de espaçamento | Uma unidade base, só múltiplos dela | Grelha |
| Intervalos entre grupos | Dentro de um grupo menores do que entre grupos | Espaço em branco |
| Bordas | Margem livre nos quatro lados | Espaço em branco |
| Ênfase | Um tratamento, usado uma vez | Ênfase |
| Contraste | Cumpre o WCAG, não só pela cor | Ênfase |
Antes de finalizar, confirme as dimensões da área de trabalho e as zonas de segurança no guia de tamanhos de imagem para redes sociais. Na nossa experiência, as plataformas sobrepõem a sua própria interface às publicações, pelo que uma composição que funciona a 1080 x 1080 pode mesmo assim perder a etiqueta junto à borda. Para Stories e Reels, veja zonas de segurança explicadas, que cita as zonas de segurança de anúncios da Meta.
Como manter uma composição consistente numa equipa?
As decisões de composição mantêm-se mais facilmente quando estão bloqueadas num modelo, em vez de dependerem da memória. No Chikaboom, um designer constrói a composição uma vez e a equipa só preenche o texto. Tamanhos, espaçamento e tipos de letra ficam fixos, e o texto encolhe dentro da sua caixa em vez de transbordar, pelo que a hierarquia sobrevive a um título mais longo. Pode experimentar na demonstração ao vivo.
Para onde vou a seguir neste grupo de artigos?
Esta página é o centro do tema composição. Os guias irmãos tratam de tipografia, cor e contraste e tamanhos de imagem, que, juntamente com a composição, formam o sistema visual de uma publicação. Para bloquear estas decisões para toda a equipa, leia diretrizes de marca para equipas pequenas e, para uma aplicação específica de uma plataforma, veja design de publicações no LinkedIn.
Perguntas frequentes
Como decido o que as pessoas leem primeiro num gráfico de redes sociais?
Escolha uma coisa e faça dela o elemento maior e de maior contraste. O NN/g define a hierarquia visual como guiar o olhar por ordem de importância pretendida, e a nossa recomendação é fazer um teste de semicerrar os olhos antes de publicar.
Quantos tamanhos de texto deve usar uma publicação?
O NN/g sugere no máximo três variações de tamanho e no máximo dois elementos de grande dimensão. A nossa recomendação para uma publicação de redes sociais é dois ou três: um título, uma linha de apoio e uma pequena etiqueta.
O espaço em branco numa publicação de redes sociais é espaço desperdiçado?
Não. O NN/g descreve o espaço em branco como uma ferramenta que torna o conteúdo mais fácil de percorrer e de ler. Na nossa experiência, uma publicação com margem livre lê-se mais depressa do que uma preenchida de ponta a ponta, porque o olhar tem onde descansar.
Preciso de uma grelha para uma única imagem?
A nossa recomendação é que sim, uma grelha simples. O Material Design constrói o seu espaçamento numa escala de 8dp; uma unidade repetida como essa mantém margens e intervalos consistentes em todo o feed.