👁️ Hierarquia Visual
A hierarquia visual e a organizacao dos elementos por ordem de importancia. Em dashboards, isso significa que o usuario deve entender instantaneamente o que e mais importante, o que e secundario e o que e suporte.
Niveis de Hierarquia em Dashboards
KPIs Principais
Numeros grandes, cores vibrantes, posicao de destaque no topo. Sao os dados que respondem a pergunta principal do dashboard.
Graficos e Tendencias
Visualizacoes de dados que mostram padroes ao longo do tempo. Ocupam a area central do dashboard.
Tabelas e Detalhes
Dados granulares para drill-down. Posicionados abaixo ou em paineis secundarios.
Filtros e Controles
Elementos de interacao. Discretos mas acessiveis, geralmente em sidebars ou headers.
📊 Regra dos 3 Segundos
O usuario deve identificar a informacao mais importante em 3 segundos. Se demorar mais, a hierarquia precisa ser revista. Teste com pessoas que nunca viram seu dashboard.
💡 Como Criar Hierarquia
- • Tamanho: Elementos maiores = mais importantes
- • Cor: Cores vibrantes chamam atencao primeiro
- • Posicao: Topo-esquerda e lido primeiro (F-pattern)
- • Peso: Negrito e fontes pesadas destacam texto
⚡ Contraste
O contraste cria diferenciacao visual entre elementos. Em dashboards, usamos contraste para separar dados, destacar anomalias e guiar o olhar do usuario.
✓ Bom Contraste
- ✓ Texto claro em fundo escuro (ou vice-versa)
- ✓ KPIs em destaque vs fundo neutro
- ✓ Linhas de graficos coloridas vs grid cinza
- ✓ Alertas em vermelho vs interface calma
✗ Contraste Ruim
- ✗ Cinza claro sobre branco
- ✗ Muitas cores vibrantes competindo
- ✗ Texto sobre imagens sem overlay
- ✗ Bordas quase invisiveis
Tipos de Contraste
Cor
Cores complementares ou opostas no circulo cromatico
Tamanho
Grande vs pequeno cria hierarquia natural
Peso
Bold vs regular para enfase textual
📐 Alinhamento
O alinhamento cria ordem e conexao visual entre elementos. Em dashboards, um grid rigoroso e nao negociavel - cada elemento deve estar alinhado a uma linha invisivel do grid.
Sistema de Grid para Dashboards
Padrao da industria. Permite divisoes em 2, 3, 4 e 6 partes iguais.
Espaco entre colunas. Consistente em toda a aplicacao.
16px mobile, 24px tablet, 32px desktop.
Todos os espacamentos sao multiplos de 8: 8, 16, 24, 32, 48...
✓ Alinhamento Correto
- ✓ Cards com mesma altura em cada linha
- ✓ Textos alinhados a esquerda (LTR)
- ✓ Numeros alinhados a direita em tabelas
- ✓ Icones centralizados verticalmente
✗ Erros Comuns
- ✗ Elementos "quase" alinhados (1-2px off)
- ✗ Texto centralizado em blocos longos
- ✗ Cards de tamanhos aleatorios
- ✗ Espacamentos inconsistentes
💡 Dica: Use Tailwind Grid
No Tailwind CSS, o sistema de grid e simples:
grid grid-cols-12 gap-4
col-span-4 (1/3 da largura)
col-span-6 (1/2 da largura)
col-span-12 (largura total)
🧲 Proximidade
A proximidade agrupa elementos relacionados. Itens proximos sao percebidos como parte do mesmo grupo. Em dashboards, isso significa agrupar metricas relacionadas e separar categorias diferentes.
Aplicacao em Dashboards
Agrupar:
- • KPIs do mesmo tema (vendas, financeiro)
- • Filtros relacionados juntos
- • Label + valor em cards
- • Grafico + legenda proximos
Separar:
- • Secoes de dados diferentes
- • Navegacao do conteudo
- • Acoes primarias das secundarias
- • Header do corpo do dashboard
📊 Regra do Espacamento
Use a regra 1.5x a 2x: o espaco entre grupos deve ser 1.5 a 2 vezes maior que o espaco entre elementos do mesmo grupo.
Exemplo: se cards tem gap-4 (16px), secoes devem ter mb-8 ou mb-12 (32-48px).
🔄 Repeticao e Consistencia
A repeticao cria unidade visual e previsibilidade. Elementos que funcionam da mesma forma devem parecer iguais. Isso reduz a carga cognitiva e acelera o aprendizado da interface.
O que Deve ser Consistente
Cores
Mesma cor = mesma categoria de informacao em todo dashboard
Tipografia
Mesmos tamanhos e pesos para elementos equivalentes
Cards
Border-radius, sombras e padding identicos
Botoes
Estilos identicos por categoria (primario, secundario)
Graficos
Paleta de cores consistente em todas as visualizacoes
Espacamentos
Sempre multiplos do baseline (8px)
💡 Design Tokens
Use design tokens para garantir consistencia. Sao variaveis que armazenam valores de design reutilizaveis:
--color-primary: #FACC15;
--spacing-sm: 8px;
--spacing-md: 16px;
--radius-card: 12px;
--font-heading: 700;
🧠 Principios Gestalt
Os principios Gestalt descrevem como o cerebro humano organiza informacao visual. Entender esses principios ajuda a criar dashboards que sao intuitivamente compreendidos.
Similaridade
Elementos similares (cor, forma, tamanho) sao percebidos como grupo. Use cores iguais para dados da mesma categoria.
Continuidade
O olho segue linhas e curvas naturalmente. Use linhas de tendencia e conectores para guiar o olhar.
Fechamento
O cerebro completa formas incompletas. Cards com bordas sutis ainda sao percebidos como containers.
Figura-Fundo
Separamos automaticamente objeto (figura) do contexto (fundo). Use contraste para destacar dados importantes.
Aplicacao Pratica
Ao projetar um dashboard, pergunte-se: "Quais elementos o usuario vai perceber como grupo? O que vai se destacar do fundo? Para onde o olhar vai fluir naturalmente?"
📝 Resumo do Modulo
O que aprendemos:
- ✓ Hierarquia visual guia a atencao do usuario
- ✓ Contraste cria diferenciacao e destaque
- ✓ Alinhamento em grid cria ordem
- ✓ Proximidade agrupa elementos relacionados
- ✓ Repeticao cria consistencia e previsibilidade
- ✓ Principios Gestalt explicam percepcao visual
Proximo modulo:
Tech Stack Moderna - as ferramentas e tecnologias para construir dashboards profissionais com React e Next.js.
Ir para Modulo 1.3