O padrão de leitura
No ocidente, o olho entra pelo canto superior esquerdo e percorre a página em Z. Use isso: o indicador mais importante fica em cima à esquerda; o detalhe operacional embaixo à direita.
| Zona | Conteúdo | Altura sugerida (1080p) |
|---|---|---|
| Topo (faixa) | Título, período analisado, filtros aplicados | 60-80 px |
| Faixa de KPIs | 4 a 6 cartões com valor, variação e meta | 120-140 px |
| Meio | Gráfico principal (evolução) + composição | 320-380 px |
| Base | Detalhe: tabela, ranking, drill | 260-320 px |
| Lateral esquerda | Navegação e segmentações | 220-260 px de largura |
Grid de 12 colunas
Trabalhe com uma grade mental de 12 colunas e espaçamento constante (8 ou 16 px). Visuais que ocupam 3, 4, 6 ou 12 colunas se alinham naturalmente e o painel ganha aparência profissional sem esforço.
- 1Exibição → Ajustar à grade e Mostrar linhas de grade, ativados.
- 2Defina o tamanho da página em Formatar página → Tamanho da tela (16:9, 1280x720 é o padrão seguro).
- 3Use o painel Seleção para nomear e organizar as camadas.
- 4Use Alinhar → Distribuir horizontalmente para espaçamento idêntico.
- 5Agrupe visuais relacionados (Ctrl + G) para mover em bloco.
Tipografia
- Use no máximo duas famílias tipográficas — na prática, Segoe UI resolve tudo.
- Escala clara: título 20-24 pt, subtítulo 14 pt, rótulo 10-11 pt, valor de cartão 28-36 pt.
- Nunca use texto abaixo de 9 pt: é ilegível em projetor e em celular.
- Alinhe números à direita; texto à esquerda. Sempre.
- Abrevie valores grandes: R$ 2,4 mi é mais legível que R$ 2.412.983,44 em um cartão.