Dia 3: Espaçamento e Hierarquia Visual

Aprenda a usar o 'nada' para organizar tudo. O espaço em branco é o herói invisível do bom design.

O herói invisível do design: O espaço em branco

O espaço em branco (ou espaço negativo) não é espaço "vazio" ou "desperdiçado". Pelo contrário, é uma ferramenta ativa e poderosa. É o respiro entre os elementos, a pausa entre as palavras. Um bom uso do espaço em branco:

Agrupa elementos relacionados: A proximidade indica relação. Itens perto uns dos outros são percebidos como um grupo.
Reduz a carga cognitiva: Uma tela cheia de coisas cansa o cérebro. Espaços generosos tornam a interface mais limpa e fácil de processar.
Cria foco e hierarquia: Deixar mais espaço ao redor de um botão o torna mais importante. Simples assim.

A dupla que define tudo: Padding vs. Margin

Essa é a dupla que define 90% dos seus espaçamentos. Confundi-los é normal no começo, mas vamos deixar bem claro para você nunca mais esquecer:

Padding (Preenchimento): É o espaço interno de um elemento. Pense no padding como o "recheio" da sua caixa, o espaço entre o conteúdo e a borda.
Margin (Margem): É o espaço externo de um elemento. É a "distância social" entre sua caixa e os vizinhos. A margin empurra os outros elementos para longe.

Diagrama explicando a diferença entre Padding (espaço interno) e Margin (espaço externo)

Colocando ordem na casa: o sistema de 8 pontos

Para evitar usar números aleatórios como "13px" ou "27px", designers profissionais usam um sistema de espaçamento. O mais popular é o sistema de múltiplos de 8 (ou 4). Isso significa que todos os seus paddings, margins e até alturas de linha serão baseados em múltiplos de 8 (8px, 16px, 24px, 32px, 40px, etc.). Isso cria um ritmo visual consistente e deixa seu design com uma aparência muito mais profissional e harmoniosa.

Vídeos para organizar as ideias

Ver o espaçamento sendo aplicado na prática ajuda muito a fixar os conceitos. Confira estes vídeos:

Espaçamento em UI Design (Canal DH Correa)

Figma Auto Layout 3.0: Design Responsivo, Wrap & Breakpoints! (Canal Feux)

Seu desafio de hoje: A Faxina no Layout

Pegue o card que você criou e coloriu nos dias anteriores. Agora, sua missão é refatorar todos os espaçamentos. Aplique a regra dos 8px para definir todos os paddings (espaços internos) e as margins (distância entre os elementos, se houver mais de um card).

Checklist do desafio:

Verifique todos os espaços entre os textos e as bordas do card (padding).
Ajuste todos esses valores para um múltiplo de 8 (ex: 16px, 24px).
Observe a diferença! O layout parece mais "respirável" e organizado?