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

O design geométrico cria visuais a partir de formas regulares (círculos, quadrados, triângulos e linhas retas) colocadas numa grelha. É a linguagem da Bauhaus, dos cartazes suíços, do Art Déco e da maioria dos logótipos modernos. Parece ordenado, seguro e intemporal porque as regras estão à vista: as coisas alinham, repetem-se e relacionam-se. Aqui ficas a saber como montar a grelha, escolher formas de propósito e criar padrões geométricos, incluindo vários que podes desenhar só com CSS.

Começa por uma grelha de layout

As formas sozinhas não tornam um design geométrico; o alinhamento é que o faz. Uma grelha dá lugar a cada elemento: margens à volta, colunas ao longo do formato e espaços entre elas. Depois de existir, cada círculo, bloco e linha de texto encaixa nela, e o design inteiro começa a parecer construído.

Os mestres desta abordagem foram os designers suíços das décadas de 1950 e 1960, cujos cartazes ainda parecem atuais. Design suíço explica os seus métodos, e design Bauhaus mostra onde começou o gosto pelo círculo, o quadrado e o triângulo.

Escolher formas de propósito

Cada forma básica traz associações muito usadas no ensino do design, embora nenhuma seja absoluta. Usa-as como tendências e deixa a cor e o contexto fazer o resto.

• Círculo: completo, simpático, focado. Bom para destacar uma só coisa, como uma data ou um rosto.
• Quadrado e retângulo: estáveis, honestos, estruturais. O contentor natural para texto e imagens.
• Triângulo: direcional e enérgico. Guia o olhar e sugere movimento ou tensão.
• Linha e risca: ritmo e velocidade. A horizontal transmite calma, a diagonal transmite dinamismo.
• Semicírculo e quarto de círculo: suavizam uma composição rígida 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 no seu momento mais visível. Os clássicos são riscas, xadrezes, pontos, raios, anéis, chevrons e grelhas de linhas. Fica por duas ou três cores, escolhe uma escala e decide se o padrão é o protagonista (um cartaz, um papel de embrulho) ou um fundo discreto, caso em que deves baixar bastante o contraste.

O Art Déco adotou raios, leques e formas em degraus a dourado e preto; o Memphis quebrou a grelha com rabiscos e confetis. Design Art Déco e design Memphis são boas fontes se quiseres um padrão com sabor de época.

Xadrezes, pontos e grelhas em CSS

Alguns padrões precisam que o tamanho do mosaico seja definido à parte com background-size, para se repetirem por todo o elemento. Estes três são os mais pedidos. O artigo padrões css tem muitos mais, e gradiente linear repetido explica as paragens rígidas ao pormenor.

/* 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 experimentares esta semana

• Um círculo grande: um único círculo a ocupar metade de um cartaz, com a data do evento lá dentro.
• Margem de riscas: uma faixa de riscas de toldo no topo de uma ementa ou lista de preços, sem mais nenhum padrão.
• Cantos em quarto de círculo: um quarto de círculo em cada canto de uma publicação quadrada, em duas cores alternadas.
• Número na grelha: um algarismo enorme (um ano, um preço, uma contagem de dias) alinhado à coluna da esquerda, com texto pequeno ao lado.
• Raios atrás de um produto: raios de baixo contraste a irradiar de trás de uma garrafa ou caixa num banner de loja.
• Notas em papel quadriculado: um carrossel de dicas sobre um fundo de grelha discreta, com uma regra escrita em cada slide.

Cada ideia usa um só recurso geométrico e deixa o resto simples. Costuma bastar para dar a uma publicação um ponto de vista claro, e é fácil de repetir ao longo de uma série inteira.

Manter os designs geométricos legíveis

Riscas finas e de alto contraste podem cintilar nos ecrãs e virar moiré quando uma app redimensiona a imagem, por isso testa ao tamanho em que as pessoas a vão ver. A ordem geométrica também combina bem com um elemento suave: uma única forma orgânica numa grelha rígida traz calor sem quebrar o sistema. No Gradiently, o Designer consegue compor uma publicação numa grelha limpa com o Mark da tua marca e criar a partir dela todos os outros tamanhos, para que o alinhamento sobreviva a cada formato.