Design brutalista: layouts crus e como usá-los

O design brutalista é um estilo que mostra a sua estrutura em vez de a esconder: grelhas visíveis, tipografia por defeito ou monoespaçada, contornos pretos duros, cor plana e quase nenhum ornamento. O nome vem da arquitetura brutalista, geralmente associada ao francês béton brut, betão cru. Num site ou cartaz, o brutalismo parece deliberadamente por polir, o que o faz destacar-se num mundo de cartões arredondados e gradientes suaves. Usado com cuidado, continua a ser perfeitamente fácil de ler e navegar.

De onde vem o brutalismo: uma breve história

A ideia nasceu na arquitetura depois da Segunda Guerra Mundial. Os arquitetos deixaram o betão à vista, mostraram como um edifício era feito e preferiram a função ao acabamento. Os designers gráficos e web retomaram a atitude décadas depois, não o betão.

Como é o design gráfico e web brutalista

• Tipografia por defeito ou do sistema: Times, Arial, Courier e fontes monoespaçadas, muitas vezes num só tamanho, com o peso a fazer a hierarquia.
• Estrutura à vista: contornos à volta de cada bloco, linhas de grelha visíveis, tabelas que parecem tabelas.
• Arestas duras: sem cantos arredondados, sem sombras suaves, sem desfocagem.
• Cor plana: branco, preto, cinzento e uma ou duas cores de sinal berrantes.
• Ligações cruas: ligações azuis sublinhadas, botões simples com contorno.
• Layouts densos ou irregulares: conteúdo empilhado de ponta a ponta, ou um elemento enorme a quebrar a grelha.

É na tipografia que o brutalismo mais se nota. Uma fonte monoespaçada diz “feito à mão, em código”; um serif simples no tamanho por defeito diz “não nos incomodámos com fontes”, e é esse o ponto. Fontes monoespaçadas lista boas escolhas se quiser o look sem depender do que o sistema do leitor tiver.

Brutalismo e neobrutalismo comparados

A maior parte do que hoje se chama brutalista em sites de produtos é neobrutalismo, por vezes escrito neo brutalismo. Mantém os contornos duros e a cor plana, mas acrescenta simpatia: cores vivas pastel ou de rebuçado, tipografia robusta e uma sombra sólida deslocada que faz os cartões parecerem pousados 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 áspero. Não pode ser confuso. Os melhores sites brutalistas são diretos sobre onde estão as coisas: navegação grande e simples, ligações óbvias, títulos honestos. A fealdade por escolha é um estilo; o texto ilegível é só um erro.

1. 1

   Escolha uma regra para quebrar

   Pode ser a tipografia por defeito, uma cor que choca, uma grelha irregular. Quebrar todas as convenções de uma vez parece avariado, não brutal.

2. 2

   Mantenha o contraste alto

   Preto sobre branco ou branco sobre preto é muito brutalista e muito legível. Cinzento sobre cinzento não é nem uma coisa nem outra. Confira o texto com contraste de cor e acessibilidade em mente.

3. 3

   Torne as ligações inconfundíveis

   Sublinhados e uma cor distinta. O brutalismo é um estilo em que as antigas predefinições do navegador são uma mais-valia.

4. 4

   Use a estrutura como decoração

   Contornos, linhas, secções numeradas e grelhas visíveis dão à página o seu aspeto, por isso não precisa de imagens para parecer desenhada.

5. 5

   Deixe um elemento ser enorme

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

A quem convém o design brutalista

O brutalismo diz às pessoas que se importa mais com o conteúdo do que com a embalagem. Isso assenta a editoras independentes, editoras discográficas, galerias, arquitetos, ferramentas para programadores e portefólios de designers. Assenta muito menos a um spa, a uma joalharia ou a uma marca infantil, porque esses clientes compram tranquilidade e calma. Se gosta da clareza mas não da aspereza, o design suíço partilha o amor do brutalismo pela grelha com muito mais polimento.

Também pode pedir emprestado só um pouco de brutalismo. 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 por trás desse tipo de texto simples, porque mantém uma zona calma sob as palavras e escolhe tinta clara ou escura linha a linha. Junte-o aos layouts de design de landing pages para um site que parece ao mesmo tempo cru e acabado.