Pular para o conteúdo
Guia Prático
Navegação
v0.1.1

Grid & Layout

Em produção

O palco invisível onde o design acontece. Estrutura, alinhamento e consistência através de um sistema de colunas responsivo.

Por que usar um grid?

Sem grid consistente, cada página vira uma decisão arbitrária de posicionamento. O objetivo não é rigidez, é oferecer um vocabulário comum.

  • Previsibilidade: O usuário aprende inconscientemente onde buscar informação (padrão de leitura F ou Z).
  • Ritmo: Espaçamentos consistentes criam harmonia visual e reduzem o ruído.
  • Responsividade: Um bom sistema define como o conteúdo se comporta quando o espaço muda, não apenas como ele parece estático.

Princípios deste sistema

  • Largura de leitura (Measure): Texto corrido respeita um máximo de ~65 caracteres por linha. Linhas muito longas cansam o olho; muito curtas quebram o fluxo.
  • Espaçamento relativo: Proximidade indica relação. Elementos relacionados devem estar mais próximos entre si do que de grupos diferentes.
  • Alinhamento ótico: O alinhamento visual é mais importante que o matemático.

Estrutura de Layout

Utilizamos uma estrutura de 3 painéis para interfaces desktop complexas de documentação:

Sidebar (Navegação)

Fixa à esquerda. Contexto global do que existe no sistema.

Conteúdo (Main)

Fluido, mas com trava de largura máxima para leitura. Onde o usuário foca.

Aside (contexto)

Conteúdo de suporte (Table of Contents). Fixo à direita, desaparece em telas menores.

Responsividade

O layout deve se adaptar ao dispositivo, não forçar o desktop numa tela pequena.

Mobile

Foco total no conteúdo (coluna única). Navegação colapsa para drawer/menu. Padding lateral reduzido para aproveitar espaço.

Tablet

Grids internos começam a se formar (2 colunas). Sidebar pode ou não estar visível, dependendo da densidade da aplicação.

Desktop

Experiência completa. Espaço branco abundante é usado para respiro, não preenchido com ruído.