designing-page-layout

Projetando Layout de Página

Visão Geral

A maioria das páginas falha no ritmo, não nas ideias. A tipografia está boa, as cores estão boas, e ainda assim parece um template, porque o espaçamento vertical foi decidido seção por seção e nada se alinha.

Princípio central: escolha uma escala de espaçamento, uma escala tipográfica e um sistema de seção antes de estilizar qualquer coisa, e nunca introduza um valor que não esteja neles.

O sistema de seção

Seções de conteúdo compartilham um punhado de valores. Cenas fixas (pinned scenes) são a exceção.

Parte	Regra
Título da seção	um tamanho para cada seção de conteúdo (por exemplo 48 no desktop, 38 em telefones)
Borda esquerda	uma borda, igual à borda do logotipo da navegação. Uma escala que se ajusta à altura move a borda, então meça-a
Rótulo	um estilo de pílula acima do título
Card	um raio, um traço, um tom. Nunca borda mais sombra mais preenchimento
Card final	o título nas linhas da grade, os botões na próxima linha, nenhuma frase extra

Cenas fixas e com scrub mantêm seus próprios tamanhos de palco. Elas são propositalmente da altura da viewport, e seu espaço em branco é a pista de rolagem. Não reduza um palco fixo sem reancorar cada posição que seja uma porcentagem dele.

Uma página onde cada seção tem seu próprio tamanho de título, sua própria borda esquerda e seu próprio card parece montada. Esta tabela é o que impede isso.

Ritmo de espaçamento

Decida a escala uma vez. Uma base de 4px com uma rampa geométrica cobre tudo:

0.4  0.8  1.6  2.4  3.2  4.8  6.4  8  12  16 rem

Direcione todo o espaçamento da seção através de dois tokens, --sec entre seções e --blk entre blocos dentro de uma. Apertar uma página solta significa alterar dois números, não quarenta. Em uma página 48 e 40 unidades no desktop e 36 e 28 em telefones reduziram o documento em cerca de 10%.

Os tamanhos dos elementos não mudam quando você aperta o ritmo. Cards, tipografia, logotipos, botões: mantenha-os como projetados. Compare os tamanhos dos componentes entre a versão antiga e a nova para provar isso.

O preenchimento da seção é onde as páginas se desfazem. Audite cada junção, não cada seção:

Junção	Lacuna total	Interpretação
Duas seções não relacionadas	200-240px	capítulos separados
Um bloco continuando o acima	40-80px	um capítulo, duas partes
Mídia sangrando encontrando uma seção	0	um corte

Meça a soma do padding-bottom da seção superior e do padding-top da seção inferior. Uma página com 120/60, 64/20, 24/0 e 0/120 produz lacunas de 180, 84, 24 e 120 sem lógica. O leitor sente isso como desleixo sem conseguir nomeá-lo.

Uma lacuna acima de ~240px em um fundo de cor única precisa de algo nela. Ou a aperte ou coloque um CTA lá.

A primeira tela

Dimensione o herói para que a próxima faixa apareça na primeira tela. clamp(620, 100svh - 150, 900) unidades coloca a faixa de prova à vista após uma rolagem. Um herói que preenche a viewport e não mostra nada abaixo dela esconde a prova da qual a página depende.

Componentes compartilhados pertencem ao site

Uma navegação, rodapé ou botão que existe no site ativo é o design. Não o reformule em uma nova página. Quando parece diferente na nova página, a causa é quase sempre uma substituição em nível de página vazando. Compare estilos computados com o site ativo e remova a substituição, com escopo no ponto de interrupção onde ela vaza.

Escala tipográfica

Duas famílias no máximo: uma para exibição, uma para texto. Números em uma fonte de exibição parecem projetados; números em uma fonte de corpo simples parecem dados.

Sempre defina font-variant-numeric: lining-nums tabular-nums em qualquer número que esteja em uma linha com outros números. Sem isso, "3.000" e "500.000+" não se alinharão e você não saberá por quê.

O espaçamento negativo entre letras escala com o tamanho: aproximadamente -0.02em em tamanhos de exibição, 0 no corpo, positivo 0.08em em sobrancelhas em maiúsculas.

Corresponda exatamente às larguras tipográficas do design. Veja extracting-figma-truth para a armadilha do tamanho óptico.

Cards e grades

O erro de card mais comum é conteúdo irregular produzindo cards irregulares.

Antes	Depois	Por que
.card { padding: 2rem } em uma grade	adicione align-items: stretch na grade e height: 100% no card	caso contrário, os cards são tão altos quanto seu próprio conteúdo
O conteúdo flui de cima para baixo	margin-top: auto no elemento que deve ficar na parte inferior	fixa a métrica ou CTA a uma linha de base compartilhada entre os cards
O rótulo quebra em 1 linha em um card, 2 em outro	min-height igual a 2 linhas no rótulo	mantém a linha de base de cada card idêntica
<img> com tamanho intrínseco	wrapper com aspect-ratio + object-fit: cover na imagem	uma grade de imagens de proporção mista não é uma grade
Preenchimento cinza atrás dos cards	branco com um traço de 1px	preenchimentos parecem placeholder, traços parecem projetados

Blocos de estatísticas e números

Um bloco de números tem três partes em uma ordem fixa: fonte ou rótulo acima, figura, legenda abaixo. A figura é a maior coisa no bloco e cada figura na linha compartilha uma linha de base.

• Nunca coloque um não-número em um slot de número. "Creative Ops" em uma linha com "150+" e "3.000" parece um erro. Ou encontre o número ou mova esse fato para a prosa.
• Uma figura que quebra em duas linhas quebra a linha. "6 semanas a 24 horas" torna-se "24h" com o restante na legenda.
• Limite a legenda a duas linhas. Se precisar de três, a legenda está fazendo o trabalho da figura.

Tiras de logotipos

Logotipos são dimensionados pelo peso óptico, nunca pela caixa delimitadora. Um logotipo empilhado, um emblema quadrado e uma marca nominativa de linha única definidos com a mesma altura CSS parecerão errados de três maneiras diferentes.

Comece com: logotipo empilhado 44px, emblema quadrado 40px, marca nominativa 22px, depois ajuste a olho. Normalize cada marca para uma cor de tinta. Cores de logotipo misturadas fazem uma tira parecer raspada. Apenas logotipos em negativo vão em uma tira (veja writing-claims-that-hold).

CSS compartilhado e estouro em telefones

Uma regra de largura escrita para um componente de desktop, como width: 37rem !important, pode fazer todo o documento mais largo que um telefone (428 contra 390). O sintoma é uma faixa branca na borda direita. Verifique scrollWidth contra clientWidth em 390, e escopo de larguras fixas para os pontos de interrupção para os quais foram projetadas.

Os sinais de uma página templatizada

• Cada seção está centralizada
• Os preenchimentos da seção são todos 120px independentemente do relacionamento
• Cards têm borda e sombra e preenchimento
• Os títulos estão definidos na fonte do corpo com um peso mais pesado
• Os números estão na fonte do corpo
• Duas cores de destaque, nenhuma das quais é a da marca
• Valores de border-radius de 4, 8, 12 e 16 todos na mesma página

Lista de verificação

• Cada valor de espaçamento está na escala; as seções rodam em dois tokens
• Cada lacuna de junção de seção é deliberada e cai em uma das três faixas
• Um tamanho de título, uma borda esquerda, um rótulo, um estilo de card nas seções de conteúdo
• A próxima faixa aparece na primeira tela
• Os componentes compartilhados correspondem aos estilos computados do site ativo
• Os cards em uma grade têm a mesma altura, com uma linha de base interna compartilhada
• Toda a mídia em uma grade compartilha uma aspect-ratio
• Os números usam figuras tabulares com alinhamento
• Os logotipos são dimensionados opticamente e em uma cor de tinta
• Nenhum estouro horizontal em 390px
• Nenhuma lacuna acima de 240px que não contenha nada