Grid não é gaiola. É o sistema que permite que materiais produzidos por pessoas diferentes em países diferentes pareçam criados pela mesma equipe.
Consistência
O mesmo grid aplicado em São Paulo e em Lagos produz materiais visualmente coerentes — sem que o designer de um país precise ver o trabalho do outro.
Velocidade
Com o grid definido, o designer local não começa do zero. Ele herda uma estrutura que já resolve proporções, margens e hierarquia — e pode focar no conteúdo.
Hierarquia
O grid define onde o olho entra na peça, onde vai e onde para. Um layout sem grid força o olho a decidir sozinho — e o olho sempre escolha o caminho errado.
O sistema de grid da SDARM é baseado em 12 colunas — o padrão mais flexível da história do design gráfico. Ele funciona em layouts de 1 coluna (sinalização, banner), 2 colunas (editorial, impresso), 3 colunas (redes sociais, cards) e 4 colunas (grade de produtos, tabelas).
Para materiais digitais, o grid se adapta responsivamente. Para materiais impressos, as proporções são fixas. Para sinalização, usa-se um grid simplificado de 4 zonas.
Unidade base
A unidade base do sistema é 8px. Todos os valores de espaçamento, margem, padding e tamanho de componente são múltiplos de 8. Isso garante alinhamento perfeito entre elementos mesmo sem guias visíveis — porque tudo "encaixa" na mesma grade invisível.
Seção 10.1 · Princípios de composição
"Cinematic overhead shot of a designer desk with printed layout grids, ruler and pencil, hands aligning a sheet, modest long-sleeve clothing, warm side light, film grain, low saturation, no text visible, 4:3"
10.2 — Grid de 12 colunas
Sistema base e variações por formato
Selecione o formato e o número de colunas para visualizar o grid em diferentes contextos de uso. As colunas em azul mostram a área ativa; os canais cinzas, o espaçamento entre colunas.
Formato
Post 1:1 · 1080×1080px
Grid para digital
Posts e stories
4 colunas com margem de 40px (1080px). Gutter de 16px. Área segura interior com padding adicional de 24px.
Reels e vídeo
3 zonas horizontais: topo (20%), conteúdo central (60%), rodapé com logo (20%). Sem grade de colunas vertical.
Site e web
12 colunas com max-width 1120px, gutter 24px, margem lateral 56px em desktop, 28px em mobile.
Grid para impresso
A4 e A5
Margem superior: 20mm · inferior: 22mm · lateral: 18mm. Sangria de 3mm. Coluna de texto máxima: 120mm (A4).
Cartazes A3/A2
6 colunas. Margem 24mm. Gutter 8mm. Sangria 5mm. Título ocupa no mínimo 3 colunas.
Sinalização
4 zonas: topo (logo), área principal (ícone + texto), suporte inferior, barra de cor. Margens mínimas de 15% da dimensão menor.
10.3 — Formatos oficiais
Proporções para digital e impresso
Cada formato tem proporção, resolução e margens específicas. Usar as proporções corretas desde o início evita cortes, recadramentos e perda de qualidade na entrega final.
Post Square
1 : 1
Instagram · Facebook
Post Portrait
4 : 5
Feed principal
Stories / Reels
9 : 16
Stories · Reels
Landscape
16 : 9
Vídeo · Apresentação
A4
A4
Impresso
Proporção
1 : 1
Resolução
1080×1080px
Contexto
Post feed · Instagram · Facebook
Posts institucionais, devocionais, fotos de culto
Seção 10.3 · Formatos oficiais
"Documentary photo of printed posters and cards in different sizes arranged neatly on a large wooden table, warm ambient light, film grain, low saturation, no text visible, 16:9"
10.4 — Escala de espaçamento
Tokens de espaço — do 4px ao 128px
Todos os espaços no sistema são múltiplos de 4. Os tokens abaixo são os valores oficiais — usá-los garante que qualquer material se alinhe com qualquer outro sem ajuste manual.
xs4px
Entre ícone e label
sm8px
Espaço interno de botões
md16px
Gutter, padding de card
lg24px
Entre elementos de bloco
xl32px
Margem de post social
2xl48px
Separação de seções
3xl64px
Respiro de seção editorial
4xl96px
Padding de seção de página
5xl128px
Separação máxima entre blocos
Por que múltiplos de 4?
A maioria das telas usa pixels inteiros. Múltiplos de 4 garantem que elementos nunca fiquem em posições fracionadas (ex: 13.5px) — o que causaria borrão em telas de baixa densidade. Além disso, múltiplos de 4 são naturalmente divisíveis por 2, criando proporções simétricas sem cálculo.
10.5 — Zona de proteção do logo
Área mínima e posicionamento
O logo precisa de respiro. A zona de proteção é a área mínima obrigatória ao redor do logotipo — nenhum texto, imagem ou elemento visual pode entrar nessa zona.
Zona de proteção = X ao redor
Definição de X
X = altura do símbolo. A zona de proteção ao redor do logo é igual à altura do símbolo em todas as direções.
Em posts sociais (1080px), a zona mínima é de 40px ao redor do logo.
Em A4, a zona mínima é de 8mm ao redor do logo.
Violações da zona
Texto ou slogan tocando o logo — mesmo que seja o slogan oficial da Igreja.
Elemento decorativo (linha, forma, foto) invadindo a zona de proteção.
Logo posicionado na borda da peça sem margem mínima de uma zona X.
Posicionamento aprovado do logo
Superior esq.
Superior dir.
Inferior esq.
Centro — evitar
O logo no centro cria competição com o conteúdo principal. Use os cantos — preferencialmente superior esquerdo.
10.6 — Composição de posts
Estrutura de layouts para redes sociais
Três estruturas de composição cobrindo os usos mais frequentes — cada uma com grid, zonas e lógica de hierarquia definidos.
Post institucional · 1:1
O sábado nos reúne.
Igreja Adventista do Sétimo Dia Movimento de Reforma
1:1 · 1080×1080px
Grid 4 col · Margem 40px · Logo: canto sup. esq. · Título: zona inferior · Barra dourada base opcional
Post fotográfico · 4:5
Comunhão de sábado.
Fotografia + texto sobre gradiente
4:5 · 1080×1350px
3 col · Foto full-bleed · Gradiente escuro na base · Logo no topo · Título sobre gradiente
Story · 9:16
Ninguém caminha sozinho.
Zona segura entre 20% e 80%
9:16 · 1080×1920px
Zona segura 20%–80% · Logo centralizado no topo · Conteúdo na faixa central · CTA base
Zona segura para vídeo e stories
Em stories e reels, a plataforma sobrepõe elementos de interface (avatar, texto, ícones) nas faixas superior e inferior. A zona segura é sempre entre 20% e 80% da altura total — nenhum conteúdo essencial fora dessa faixa. Isso significa: os primeiros 384px e os últimos 384px de um story de 1920px são zonas de risco.
Seção 10.6 · Composição de posts
"Close-up of hands positioning a photograph on a printed poster mockup over a grid sheet, warm window light, shallow depth of field, film grain, low saturation, no text visible, 4:5"
10.7 — Margens e sangria
Regras para materiais impressos
Sangria, área segura e margens internas são obrigatórios em todos os arquivos enviados para gráfica. Um arquivo sem sangria gera bordas brancas indesejadas no produto final.
Área de sangria — 3mm além do corte
Área segura — conteúdo nesta zona
A4 · 210×297mm
Sangria3mm (todos os lados)
Margem superior20mm
Margem inferior22mm
Margem lateral18mm
Gutter de coluna6mm
Cartaz A3 · 297×420mm
Sangria5mm (todos os lados)
Margem superior24mm
Margem inferior28mm
Margem lateral24mm
Gutter de coluna8mm
10.8 — Regras de composição
O que é permitido e o que é proibido
Grid é disciplina visual. Desviar do grid não é criatividade — é descuido. As regras abaixo protegem a coerência da marca em qualquer suporte.
Permitido
Usar os formatos e proporções oficiais (1:1, 4:5, 9:16, 16:9, A4).
Aplicar a escala de espaçamento com tokens múltiplos de 4.
Posicionar o logo em cantos — com zona de proteção respeitada.
Usar as 3 estruturas de composição aprovadas como base para novos materiais.
Ampliar o grid (ex: de 4 para 6 colunas) quando o conteúdo exige — mantendo os valores base.
Proibido
Criar layouts sem grid — mesmo que "pareça bem".
Redimensionar uma peça de um formato para outro sem redesenhar (ex: esticar um post 1:1 para 9:16).
Enviar arquivos para gráfica sem sangria — resultado são bordas brancas no produto final.
Posicionar conteúdo essencial fora da zona segura em stories e reels.
Usar espaços arbitrários — qualquer valor que não seja múltiplo de 4.
O grid não limita. Ele libera.
Liberdade com estrutura
Com o grid definido, o designer pode se concentrar no que realmente importa — a mensagem, a foto, o texto. A estrutura já está resolvida. O improviso deixa de ser necessário.
Coerência automática
Quando todos os materiais seguem o mesmo sistema de espaçamento, eles parecem ter sido criados pela mesma equipe — mesmo quando foram produzidos em países diferentes, por pessoas diferentes.
Escala sem atrito
Um sistema de grid bem definido permite criar 10 posts diferentes em um dia sem perder coerência visual. Isso só é possível quando as decisões estruturais já foram tomadas antecipadamente.
Nota do Brand Manager
"Em toda gráfica local, em todo computador de comunicação de campo, em todo celular de líder de jovens que cria posts — o grid precisa estar presente. Não como regra abstrata, mas como hábito. É a diferença entre comunicar e apenas publicar."