Design brutalista: layout grezzi e come usarli

Il design brutalista è uno stile che mostra la sua struttura invece di nasconderla: griglie visibili, font di default o monospazio, duri bordi neri, colore piatto e quasi nessun ornamento. Il nome viene dall’architettura brutalista, che di solito si fa risalire al francese béton brut, cemento grezzo. Su un sito o un poster il brutalismo appare volutamente non rifinito, e per questo si distingue in un mondo di card arrotondate e gradienti morbidi. Usato con cura, resta comunque perfettamente leggibile e facile da navigare.

Da dove viene il brutalismo: una breve storia

L’idea è nata in architettura dopo la seconda guerra mondiale. Gli architetti lasciavano il cemento a vista, mostravano come era fatto un edificio e preferivano la funzione alla finitura. I designer grafici e web ne hanno ripreso l’atteggiamento decenni dopo, non il cemento.

Che aspetto ha il design grafico e web brutalista

• Font di default o di sistema: Times, Arial, Courier e caratteri monospazio, spesso a un’unica dimensione, con il peso a fare la gerarchia.
• Struttura visibile: bordi attorno a ogni blocco, linee della griglia in vista, tabelle che sembrano tabelle.
• Spigoli duri: niente angoli arrotondati, niente ombre morbide, niente sfocatura.
• Colore piatto: bianco, nero, grigio e uno o due colori di segnalazione squillanti.
• Link grezzi: link blu sottolineati, pulsanti semplici con un bordo.
• Layout fitti o irregolari: contenuti impilati da bordo a bordo, o un enorme elemento che rompe la griglia.

È nella tipografia che il brutalismo si vede di più. Un carattere monospazio dice «fatto a mano, in codice»; un serif semplice a dimensione predefinita dice «non ci siamo curati dei font», ed è proprio questo il punto. Font monospazio elenca buone scelte se vuoi l’effetto senza dipendere da ciò che ha il sistema del lettore.

Brutalismo e neobrutalismo a confronto

Gran parte di ciò che oggi sui siti di prodotto viene chiamato brutalista è neobrutalismo, a volte scritto neo brutalismo. Mantiene i contorni duri e il colore piatto ma aggiunge simpatia: colori vivaci pastello o da caramella, caratteri massicci e un’ombra piena sfalsata che fa sembrare le card appoggiate sulla pagina.

.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 */
}

Come usare il design brutalista senza danneggiare l’usabilità

Il brutalismo può avere un aspetto grezzo. Non può essere confuso. I siti brutalisti più forti sono schietti su dove stanno le cose: navigazione grande e semplice, link evidenti, titoli onesti. La bruttezza scelta è uno stile; il testo illeggibile è solo un errore.

1. 1

   Scegli una regola da rompere

   Forse è il font di default, forse un colore stonato, forse una griglia irregolare. Rompere ogni convenzione insieme sembra rotto, non brutale.

2. 2

   Tieni alto il contrasto

   Nero su bianco o bianco su nero è molto brutalista e molto leggibile. Grigio su grigio non è nessuna delle due. Controlla il testo pensando a contrasto dei colori e accessibilità.

3. 3

   Rendi i link inconfondibili

   Sottolineature e un colore distinto. Il brutalismo è uno stile in cui i vecchi valori predefiniti del browser sono un vantaggio.

4. 4

   Usa la struttura come decorazione

   Bordi, filetti, sezioni numerate e griglie visibili danno alla pagina il suo aspetto, quindi non servono immagini perché sembri progettata.

5. 5

   Lascia che un elemento sia enorme

   Un titolo o un numero gigante che rompe la griglia dà tensione a un layout brutalista. Vedi il design grafico audace per la scala.

A chi si addice il design brutalista

Il brutalismo dice alle persone che ti importa più del contenuto che della confezione. Si addice a editori indipendenti, etichette discografiche, gallerie, architetti, strumenti per sviluppatori e portfolio di designer. Si addice molto meno a una spa, a un gioielliere o a un brand per bambini, perché quei clienti cercano rassicurazione e calma. Se ti piace la chiarezza ma non l’asprezza, il design svizzero condivide l’amore del brutalismo per la griglia con molta più rifinitura.

Puoi anche prendere in prestito il brutalismo in parte. Un sistema tipografico grezzo e monospazio sopra uno sfondo ricco, per esempio, mantiene l’onestà aggiungendo atmosfera. Un Mark di Gradiently sta bene dietro a quel tipo di testo semplice, perché tiene un’area calma sotto le parole e sceglie inchiostro chiaro o scuro riga per riga. Abbinalo ai layout del design di landing page per un sito che sembri insieme grezzo e finito.