Design brutalista: layouts crus e como usá-los

O design brutalista é um estilo que mostra a estrutura em vez de escondê-la: grids visíveis, fontes padrão ou monoespaçadas, bordas pretas duras, cor chapada e quase nenhum ornamento. O nome vem da arquitetura brutalista, normalmente ligada ao francês béton brut, concreto bruto. Num site ou cartaz, o brutalismo parece propositalmente sem acabamento, o que faz com que ele se destaque num mundo de cards arredondados e degradês suaves. Usado com cuidado, continua perfeitamente fácil de ler e navegar.

De onde vem o brutalismo: uma breve história

A ideia começou na arquitetura depois da Segunda Guerra Mundial. Os arquitetos deixavam o concreto à mostra, revelavam como o prédio era feito e priorizavam a função em vez do acabamento. Designers gráficos e de web adotaram a atitude décadas depois, não o concreto.

Como é o design gráfico e web brutalista

• Fontes padrão ou do sistema: Times, Arial, Courier e fontes monoespaçadas, muitas vezes num só tamanho, com o peso fazendo a hierarquia.
• Estrutura visível: bordas em volta de cada bloco, linhas do grid à mostra, tabelas com cara de tabela.
• Bordas duras: sem cantos arredondados, sem sombras suaves, sem desfoque.
• Cor chapada: branco, preto, cinza e uma ou duas cores de sinalização fortes.
• Links crus: links azuis sublinhados, botões simples com borda.
• Layouts densos ou irregulares: conteúdo empilhado de ponta a ponta, ou um elemento enorme quebrando o grid.

É na tipografia que o brutalismo aparece com mais clareza. Uma fonte monoespaçada diz “feito à mão, em código”; uma serifa simples no tamanho padrão diz “não nos preocupamos com fontes”, e essa é justamente a ideia. Fontes monoespaçadas lista boas opções se você quer o visual sem depender do que o sistema do leitor tiver.

Brutalismo e neobrutalismo comparados

Quase tudo o que hoje é chamado de brutalista em sites de produto é neobrutalismo, às vezes escrito neo brutalismo. Ele mantém os contornos duros e a cor chapada, mas acrescenta simpatia: cores vivas pastel ou de bala, tipografia robusta e uma sombra sólida deslocada que faz os cards parecerem apoiados na página.

.card {
  background: #fff36b;
  border: 3px solid #111111;
  border-radius: 0;
  box-shadow: 6px 6px 0 #111111; /* hard offset, no blur */
  padding: 24px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

.card a {
  color: #111111;
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.button {
  background: #c4b5fd;
  border: 3px solid #111111;
  box-shadow: 4px 4px 0 #111111;
  padding: 12px 20px;
  font-weight: 700;
  cursor: pointer;
}

.button:active {
  transform: translate(4px, 4px);
  box-shadow: none; /* the button sinks into its shadow */
}

Como usar o design brutalista sem prejudicar a usabilidade

O brutalismo pode parecer bruto. Não pode ser confuso. Os sites brutalistas mais fortes são diretos sobre onde as coisas estão: navegação grande e simples, links evidentes, títulos honestos. Feiura por escolha é um estilo; texto ilegível é só um bug.

1. 1

   Escolha uma regra para quebrar

   Talvez seja a fonte padrão, talvez uma cor que destoa, talvez um grid irregular. Quebrar todas as convenções de uma vez parece quebrado, não brutalista.

2. 2

   Mantenha o contraste alto

   Preto no branco ou branco no preto é muito brutalista e muito legível. Cinza sobre cinza não é nenhum dos dois. Confira o texto pensando em contraste de cores e acessibilidade.

3. 3

   Deixe os links inconfundíveis

   Sublinhado e uma cor própria. O brutalismo é um dos poucos estilos em que os padrões antigos do navegador são uma vantagem.

4. 4

   Use a estrutura como decoração

   Bordas, fios, seções numeradas e grids visíveis dão o visual da página, então você não precisa de imagens para que ela pareça projetada.

5. 5

   Deixe um elemento ser enorme

   Um título ou número gigante quebrando o grid dá tensão a um layout brutalista. Veja design gráfico ousado para trabalhar a escala.

Para quem o design brutalista combina

O brutalismo diz às pessoas que você se importa mais com o conteúdo do que com a embalagem. Isso combina com editoras independentes, gravadoras, galerias, arquitetos, ferramentas para desenvolvedores e portfólios de designers. Combina bem menos com um spa, uma joalheria ou uma marca infantil, porque esses clientes estão comprando segurança e tranquilidade. Se você gosta da clareza mas não da aspereza, o design suíço compartilha o amor do brutalismo pelo grid com muito mais acabamento.

Você também pode usar o brutalismo em parte. Um sistema tipográfico cru e monoespaçado sobre um fundo rico, por exemplo, mantém a honestidade e acrescenta atmosfera. Um Mark do Gradiently funciona bem atrás desse tipo de tipografia simples, porque mantém uma área calma embaixo das palavras e escolhe tinta clara ou escura por linha. Combine com os layouts de design de landing page para um site que pareça cru e acabado ao mesmo tempo.