A abordagem de trabalho
Layout Grid foca no esqueleto da página: colunas, calhas, margens externas e como eles mudam entre tamanhos de viewport. Distingue colunas fluidas de contêineres com largura máxima fixa e de layouts adaptativos, de modo que a especificação da grade descreva o comportamento, e não apenas uma captura de tela do desktop.
A fonte é um guia compacto, não uma biblioteca de implementação. Os números de colunas comuns e os exemplos de breakpoints são pontos de partida. O resultado útil é uma grade escolhida para o conteúdo, com instruções claras para áreas de sangria total, seções de leitura contidas, barras laterais e cards repetidos.
Entregas esperadas
- Uma tabela de breakpoints com colunas, calhas, margens e limites de contêiner.
- Regras de layout para regiões contidas, de sangria total, barras laterais e cards.
- Notas para desenvolvedores explicando a adaptação entre larguras.
Do briefing à revisão
- 01Escolha o tipo de grade
Adapte a estrutura de colunas, modular, de linha de base ou composta ao conteúdo, em vez de supor que toda página precisa da mesma grade.
- 02Especifique o comportamento de largura
Defina onde as colunas se expandem, onde um contêiner para de crescer e quando colunas ou barras laterais são removidas.
- 03Revise larguras intermediárias
Verifique as transições em torno dos breakpoints, não apenas as telas de referência menor e maior.