Design geométrico: grades, formas e ideias de padrões

O design geométrico constrói visuais com formas regulares (círculos, quadrados, triângulos e linhas retas) colocadas numa grade. É a linguagem da Bauhaus, dos cartazes suíços, do Art Déco e da maioria dos logos modernos. Ele parece ordenado, confiante e atemporal porque as regras são visíveis: as coisas se alinham, se repetem e se relacionam. Abaixo está como montar a grade, escolher formas com intenção e criar padrões geométricos, incluindo vários que você pode desenhar só com CSS.

Comece com um layout em grade

As formas sozinhas não tornam um design geométrico; o alinhamento sim. Uma grade dá a cada elemento um lugar: margens em volta da borda, colunas atravessando o quadro e espaços entre elas. Quando ela existe, cada círculo, bloco e linha de texto se encaixa nela, e o design inteiro passa a parecer construído.

Os mestres dessa abordagem foram os designers suíços dos anos 1950 e 1960, cujos cartazes ainda parecem atuais. Design suíço cobre os métodos deles, e design Bauhaus mostra onde começou o amor por círculo, quadrado e triângulo.

Escolher formas com intenção

Cada forma básica carrega associações muito usadas no ensino de design, embora nenhuma seja absoluta. Use como tendências e deixe a cor e o contexto fazerem o resto.

• Círculo: completo, simpático, focado. Bom para destacar uma coisa, como uma data ou um rosto.
• Quadrado e retângulo: estável, honesto, estrutural. O recipiente natural para texto e imagens.
• Triângulo: direcional e cheio de energia. Guia o olhar, sugere movimento ou tensão.
• Linha e listra: ritmo e velocidade. Na horizontal parece calmo, na diagonal parece dinâmico.
• Semicírculo e quarto de círculo: suavizam um layout rígido sem deixar de ser geométricos, um favorito dos cartazes modernos.

Ideias de padrões geométricos

Os padrões são o design geométrico na sua forma mais visível. Os clássicos são listras, xadrez, bolinhas, raios, anéis, chevrons e grades de linhas. Fique em duas ou três cores, escolha uma escala e decida se o padrão é o protagonista (um cartaz, um papel de presente) ou um fundo discreto, caso em que você deve baixar bastante o contraste.

O Art Déco usou raios, leques e formas escalonadas em dourado e preto; o Memphis quebrou a grade com rabiscos e confetes. Design Art Déco e design Memphis são fontes ricas se você quer um padrão com sabor de época.

Xadrez, bolinhas e grades em CSS

Alguns padrões precisam do tamanho do bloco definido à parte com background-size, para que se repitam por todo o elemento. Estes três são os mais pedidos. O artigo de padrões CSS tem muitos outros, e repeating linear gradient explica as paradas duras em detalhe.

/* Checkerboard: one conic gradient, tiled */
.checks {
  background: repeating-conic-gradient(#111827 0 25%, #f3f4f6 0 50%) 0 0 / 48px 48px;
}

/* Polka dots */
.dots {
  background-color: #fef3c7;
  background-image: radial-gradient(circle, #b45309 6px, transparent 7px);
  background-size: 32px 32px;
}

/* Graph paper grid */
.grid {
  background-color: #f8fafc;
  background-image:
    linear-gradient(#cbd5e1 1px, transparent 1px),
    linear-gradient(90deg, #cbd5e1 1px, transparent 1px);
  background-size: 24px 24px;
}

Ideias de design geométrico para testar esta semana

• Um círculo grande: um único círculo ocupando metade de um cartaz, com a data do evento dentro dele.
• Borda listrada: uma faixa de listras de toldo no topo de um cardápio ou tabela de preços, e mais nada com padrão.
• Cantos em quarto de círculo: um quarto de círculo em cada canto de um post quadrado, em duas cores alternadas.
• Número na grade: um número enorme (um ano, um preço, uma contagem de dias) alinhado à coluna da esquerda, com texto pequeno ao lado.
• Raios atrás do produto: raios de baixo contraste saindo de trás de uma garrafa ou caixa num banner de loja.
• Notas em papel quadriculado: um carrossel de dicas sobre uma grade suave, cada slide com uma regra escrita.

Cada ideia usa um recurso geométrico e deixa o resto simples. Isso costuma bastar para dar a um post um ponto de vista claro, e é fácil de repetir numa série inteira.

Como manter designs geométricos legíveis

Listras finas de alto contraste podem tremer na tela e virar moiré quando um app redimensiona a imagem, então teste no tamanho em que as pessoas vão realmente ver. A ordem geométrica também combina bem com um elemento suave: uma única forma orgânica numa grade rígida acrescenta calor sem quebrar o sistema. No Gradiently, o Designer pode diagramar um post numa grade limpa no Mark da sua marca e gerar todos os outros tamanhos a partir dele, então o alinhamento sobrevive a cada formato.