Design certificado · C191 Instagram feed + Stories

Gráficos claros, sóbrios e prontos para a comunicação

A superfície desenhada é a imagem exportada — não uma tela de app. Os exemplos-base são deliberadamente genéricos; a variante de duas séries usa o caso fornecido de Vitória da Conquista. As peças fixam hierarquia, grid, tratamento de marca e limites do gerador.

CENA 01 · PADRÃO

Feed 4:5 · ranking em barras horizontais

1080 × 1350 Escala de visualização: 55%

Exemplo de comparação

Um território concentra o maior resultado do período

Valores ilustrativos para demonstrar ordem, proporção e destaque.

Fonte: fonte informada pela pessoa · período de exemplo
Nota: valores ilustrativos, sem unidade real.

JORGE SOLLA
MANDATO DEPUTADO FEDERAL
NEEDS ASSET · LOGO OFICIAL

CENA 02 · SISTEMA

Cinco variações, um mesmo template

Grid, tipografia, rodapé e uso de cor permanecem. Só o corpo do gráfico muda conforme a relação entre os dados.

Comparação

Um grupo aparece à frente

Ranking com valores ilustrativos.

Grupo A
Grupo B
Grupo C
Grupo D
Fonte: exemploJORGE SOLLA

Barra · ranking

Categorias longas, leitura direta.

Poucos períodos

O resultado cresce no período

Quatro momentos ilustrativos.

P1
P2
P3
P4
Fonte: exemploJORGE SOLLA

Coluna · tempo curto

Poucos períodos, base comum em zero.

Série de tempo

A tendência se mantém ao longo do tempo

Até sete pontos, com rótulo no fim.

72
Fonte: exemploJORGE SOLLA

Linha · série temporal

Tendência contínua, ponto final destacado.

Número-âncora

Um número sustenta a mensagem

Sem gráfico quando há uma única medida.

72

unidades no período de exemplo

Fonte: exemploJORGE SOLLA

Número-âncora

Um valor grande + frase que explica.

Comparação no tempo

Estadual cresce e supera o municipal

Internações em Vitória da Conquista, 2017–2026.

Estadual 23.294 · ↑ amplia Municipal 15.948 · ↓ recua 2026 · projeção
Fonte: SIH/SUSJORGE SOLLA

Linha · duas séries

Tendências, valência redundante e projeção explícita.

CENA 02B · VARIAÇÃO CERTIFICADA

Feed 4:5 · linha temporal de duas séries

1080 × 1350 Plot SVG · viewBox 880 × 620

Comparação no tempo

Internações crescem no hospital estadual e recuam no municipal

AIH aprovadas por ano · Vitória da Conquista (BA) · 2017–2026

0 projeção 2024 Estadual ultrapassa Estadual 23.294 ↑ amplia +121% até 2025 Municipal 15.948 ↓ recua −23% até 2025 2017 2019 2021 2023 2026

Fonte: Ministério da Saúde — SIH/SUS (AIH aprovadas por ano)
Nota: 2026 é projeção pela média de janeiro a junho × 2.

JORGE SOLLA
MANDATO DEPUTADO FEDERAL
NEEDS ASSET · LOGO OFICIAL

REGRAS DA LINHA DE 2 SÉRIES

Contrato visual para o porte classe-a-classe

Entrada e teto

Exatamente 2 séries e os mesmos rótulos temporais, na mesma ordem. Teto: 12 pontos por série no feed, quadrado e story (24 marcas no total). Barra/coluna continuam em 7 pontos no feed/quadrado e 5 no story. Contagem ou tempo desalinhado → perguntar; nunca interpolar, completar, repetir nem remover ponto. O domínio y é compartilhado e parte do zero real.

Bom × ruim · tons presentes

Tons entram sempre em par. Bom = #c51414 + círculo + ↑ “amplia”. Ruim = #78716c + quadrado + ↓ “recua”. No caso: Estadual é bom; Municipal é ruim. Vermelho é marca do mandato/PT e aponta o caminho desejável; nunca significa perda. O ruim permanece neutro. Palavra, seta, forma e cor tornam a leitura redundante, não decorativa.

Sem tons · comparação neutra

Se nenhum tom vier informado, não inferir juízo: série A = #1c1917 + círculo; série B = #78716c + quadrado. Rótulos finais têm nome + valor e podem trazer a variação observada com sinal matemático, sem palavra valorativa. Sem setas ou “amplia/recua”; nenhum vermelho no plot — ele fica apenas na régua superior e na marca do template.

Kicker, rótulos e colisão

Kicker fixo: “Comparação no tempo”; não há legenda separada. Cada linha termina em bloco nome + valor + glifo/palavra + variação observada, tudo ≥30 px. O gutter começa 42 px após o ponto e tem 238 px. Cada bloco usa 4 linhas: nome, valor, valência e “±N% até AAAA” em uma linha. Leading interno ≥38 px; entre blocos, ≥40 px livres. Leaders de 3 px voltam ao ponto. Nunca esconder série. Nome quebra em até 2 linhas; se não couber, pedir forma curta, nunca abreviar sozinho.

Projeção

Só quando o último período for projetado: faixa neutra #a8a29e a 16% do meio do penúltimo→último passo até 33 px depois do ponto final; apenas esse segmento usa tracejado (feed/story 18 12; quadrado 15 11). Os dois marcadores finais preservam a forma e ficam vazados, com stroke 5 px. O rótulo projetado tem de ser o último ponto das duas séries. “projeção” fica no topo direito da faixa, não junto ao eixo nem misturada aos rótulos finais; a nota traz o método. Sem projeção: remover faixa, tracejado, palavra e ressalva automática.

Eixo X · 10 pontos anuais

Fonte 30 px, centralizada. Para 9–12 pontos, mostrar rótulos alternados, sempre o primeiro e o último; omitir o penúltimo se colidir com o último. Neste caso, exibir 2017, 2019, 2021, 2023 e 2026 — o rótulo final substitui 2025. A palavra “projeção” fica acima do período, nunca espremida no eixo.

Variação e cruzamento

Se o último ponto é projeção, a variação compara o primeiro valor ao último observado, nunca à projeção: aqui, +121% até 2025 no estadual e −23% até 2025 no municipal. O cruzamento confirmado recebe dual-crossing-*: anel no ponto estadual de 2024, guia tracejada até uma caixa de 3 linhas: “2024” / “Estadual” / “ultrapassa”. A copy permanece em 28 px; nunca comprimir em uma linha nem deixá-la tocar a borda. Sem confirmação textual do cruzamento, não gerar a anotação automaticamente.

Feed · 1080×1350

Canvas padding 76/84/58 px; headline 60 px; plot 880×620, margin-top 28. Plot L52, R280, T56, B76; dados x=52…600; baseline y=544; grid em y=56/300/544. Os 10 pontos ficam em x=52/113/174/235/296/356/417/478/539/600; a largura útil cai de 598 para 548 px, com passo anual de ~61 px, e o eixo alternado usa 52/174/296/417/600 (≥121 px entre rótulos). Linhas 8 px; círculos r=8; quadrados 16×16; finais r=11 / 20×20; dash 18 12. Gutter x=642…880; nomes/valência/variação 30 px, valores 36 px. Baselines finais: Estadual 54/96/136/176; Municipal 248/290/330/370. Cruzamento: guia x=478, y=160…398; caixa x=351, y=398, 254×118, rx=8; textos em y=431/465/497.

Quadrado · 1080×1080

Canvas padding 56/84/48 px; headline 54 px; encurtar subtítulo antes de reduzir texto. Plot 880×440, margin-top 20, L52, R280, T40, B70; dados x=52…600; baseline y=370; grid em y=40/205/370. Linhas 7 px; círculos r=7; quadrados 14×14; finais r=10 / 18×18; dash 15 11. Gutter x=642…880; textos 30 px, valores 32 px. Baselines finais: Estadual 32/70/108/146; Municipal 186/224/262/300. Cruzamento: guia x=478, y=115…252; caixa x=351, y=252, 254×108, rx=8; textos em y=282/311/340.

Story · 1080×1920

Faixas seguras de 250 px no topo e na base; conteúdo padding 306/84/310 px; headline 64 px. Plot 880×700, margin-top 28, L52, R280, T64, B78; dados x=52…600; baseline y=622; grid em y=64/343/622. Linhas 8 px; círculos r=8; quadrados 16×16; finais r=11 / 20×20; dash 18 12. Gutter x=642…880; nomes, valência e variação 32 px, valores 36 px. Baselines finais: Estadual 68/112/154/196; Municipal 280/324/366/408. Plot, caixa, rótulos e “projeção” ficam integralmente entre y=250 e y=1670 do canvas. Cruzamento: guia x=478, y=181…478; caixa x=351, y=478, 254×118, rx=8; textos em y=511/545/577.

Mapa de classes do SVG

Chassi: dual-line-plot, dual-axis-label, dual-projection-band e dual-projection-label. Com tons: dual-series-good / dual-markers-good e dual-series-bad / dual-markers-bad. Sem tons, trocar apenas os modificadores por dual-series-a / dual-markers-a e dual-series-b / dual-markers-b. Projeção acrescenta dual-series-projection e dual-marker-projected-*. Saída direta: dual-end-leader, dual-end-name, dual-end-value e, só com tons, dual-end-valence; variação observada em dual-end-change. Cruzamento, quando confirmado: dual-crossing-guide, dual-crossing-ring, dual-crossing-box, dual-crossing-year e dual-crossing-copy.

CENA 03 · ADAPTAÇÃO

Stories 9:16 · conteúdo dentro da área segura

1080 × 1920 · escala 32,5%
250 px · evitar conteúdo essencial 250 px · evitar conteúdo essencial

Exemplo de comparação

Um território concentra o maior resultado

Valores ilustrativos para demonstrar hierarquia e proporção.

Território A
84
Território B
68
Território C
53
Território D
41
Território E
29
Fonte: fonte informada · valores ilustrativos.
JORGE SOLLA
NEEDS ASSET · LOGO OFICIAL

TOPO · 250 PX

Faixa reservada para chrome do Instagram, avatar e contexto. Nenhuma manchete, valor ou fonte entra aqui.

BASE · 250 PX

Faixa reservada para resposta, CTA e controles. O rodapé da peça termina acima dela.

MESMO SISTEMA, MAIS RESPIRO

A adaptação não estica o feed. Ela recompõe a hierarquia vertical, reduz um ponto do ranking e mantém título, rótulos, fonte e marca integralmente legíveis na zona central.

CENAS 04–05 · FAIL-CLOSED

Quando o dado não permite uma peça correta

Estados visíveis de recusa: o template não preenche lacunas nem força um tipo de gráfico inadequado.

?

Preciso confirmar os dados antes de gerar

A tabela recebida não deixa claro o período nem o que o valor representa. Nenhum número será completado por suposição.

  1. 1.Qual é o período de referência?
  2. 2.Os valores são quantidade, percentual ou outra unidade?
  3. 3.Qual fonte deve aparecer no rodapé?
Geração pausada · aguardando esclarecimentoJORGE SOLLA

Dado faltando ou ambíguo

Pizza com muitas fatias dificulta a comparação

Este conjunto tem mais de cinco categorias. O formato solicitado é recusado para não esconder diferenças pequenas.

Sugestão: usar barras horizontais

As categorias ficam ordenadas, com rótulo direto e uma única ênfase. Se “parte de um todo” for essencial, reduza para até cinco grupos verificáveis.

Formato não gerado · alternativa indicadaJORGE SOLLA

Pizza com mais de 5 fatias

ANOTAÇÃO DE DESIGN · NÃO EXPORTAR

Guia de medidas e integridade

34área segura do grid do perfil · ~1012 px34
1012 × 1350

Título, plot, fonte e marca dentro desta largura segura.

Canvas

1080 px de largura. Feed 1080×1350; Stories 1080×1920.

Tipografia mínima

Headline ≥48 px; rótulos e valores ≥30 px no arquivo final.

Contraste

Texto ≥4.5:1; marcas de dado ≥3:1. Cor nunca é a única pista.

Escala honesta

Barras e colunas começam em zero. Sem 3D, perspectiva ou eixo truncado.

Densidade

Barra, coluna e linha simples: até 7 pontos. Exceção aprovada: linha de 2 séries, até 12 pontos alinhados por série; story mantém 5 apenas para barra/coluna.

Fundo e sinal

Off-white #faf9f7. Vermelho #c51414 ocupa no máximo ~10% da peça.