# Design brutalista: layout grezzi e come usarli

[Canonical HTML page](https://gradiently.design/it/guide/brutalist-design)

Il brutalismo è nato con gli edifici in cemento ed è diventato un modo di progettare siti e poster che rifiuta la rifinitura. Usato con intenzione, è uno degli stili più riconoscibili che si possano scegliere.

## The short version

- Il design brutalista prende il nome dall’architettura brutalista, un termine che di solito si fa risalire al francese béton brut, cioè cemento grezzo.
- Nel design grafico e web, brutalismo significa struttura a vista: griglie visibili, font di default o monospazio, bordi duri e poca decorazione.
- Il neobrutalismo è una derivazione più amichevole e curata usata in app e siti, con colori vivaci piatti, spessi contorni neri e ombre nette sfalsate.
- I layout brutalisti possono sembrare trascurati pur restando facili da usare, purché contrasto del testo, stile dei link e navigazione restino chiari.
- Il brutalismo funziona meglio per brand che vogliono apparire onesti, indipendenti o tecnici, e meno per quelli che vendono calma o lusso.

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.

| Quando | Che cosa è successo |
| --- | --- |
| Fine anni Quaranta al 1952 | Le Corbusier costruisce l’Unité d’Habitation a Marsiglia in *béton brut* a vista, l’edificio più spesso citato come inizio dello stile. |
| Inizio anni Cinquanta | Alison e Peter Smithson usano l’espressione New Brutalism per la propria architettura essenziale. |
| 1955 | Il critico Reyner Banham pubblica il saggio *The New Brutalism*, dando al movimento la sua teoria. |
| Anni 2010 | I web designer adottano il termine per siti grezzi, dall’aspetto scritto a mano in codice, che ignorano i modelli rifiniti. |
| Anni 2020 | Il neobrutalismo si diffonde tra app e startup: colori vivaci piatti, contorni spessi e ombre nette sfalsate. |

Dal cemento al codice. L’idea comune a tutto questo è l’onestà su come è fatta una cosa.

## 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.

- Cemento: #e5e4e0
- Inerte: #9a9894
- Catrame: #111111
- Bianco: #ffffff
- Arancione segnale: #ff4800
- Blu dei link: #0000ee

Una classica palette brutalista: grigi cemento, nero, bianco e un colore di segnalazione. `#0000ee` è il blu dei link non visitati che molti browser usano da sempre come predefinito.

È 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](https://gradiently.design/it/guide/monospace-fonts) 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.

### Brutalismo

- Grigi, nero, bianco, un colore di segnalazione
- Font di default o di sistema
- Volutamente scomodo, a volte ostile
- Sembra un documento o una fanzine
- Comune su portfolio, siti di arte e cultura

### Neobrutalismo

- Colori vivaci piatti come limone, lilla e menta
- Grotteschi massicci con personalità
- Giocoso e accessibile
- Sembra fatto di adesivi su una pagina
- Comune su startup, app e newsletter

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

Una card e un pulsante neobrutalisti. L’ombra non ha sfocatura, quindi sembra una lastra piena; premendo il pulsante, questo scivola al suo posto.

## 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. **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. **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à](https://gradiently.design/it/guide/color-contrast-accessibility).
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. **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. **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](https://gradiently.design/it/guide/bold-design-ideas) per la scala.

Un post verticale in stile appunti di campo con la scritta Indice dei lavori, dal 2019, su uno sfondo materico

Sensibilità brutalista in un post: testo semplice, parole da documentario e uno sfondo fatto solo di texture e senza rifiniture.

## 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](https://gradiently.design/it/guide/swiss-design) 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](https://gradiently.design/it/guide/landing-page-design) per un sito che sembri insieme grezzo e finito.

## FAQ

### Che cos’è il design brutalista?

Uno stile che espone la struttura ed evita la rifinitura, con font di default o monospazio, bordi duri, colore piatto e griglie visibili. Prende il nome dall’architettura brutalista.

### Da dove viene il nome brutalismo?

Di solito si fa risalire al francese *béton brut*, cioè cemento grezzo, il materiale più associato allo stile architettonico del dopoguerra.

### Che differenza c’è tra brutalismo e neobrutalismo?

Il brutalismo è grezzo e spesso austero, in grigi con font di default. Il neobrutalismo mantiene i contorni spessi ma aggiunge colori vivaci piatti, caratteri massicci e ombre nette sfalsate.

### Il web design brutalista danneggia l’usabilità?

Non deve. Con contrasto del testo alto, link evidenti e navigazione semplice, un sito brutalista può essere più facile da usare di uno rifinito.

### Quali font si usano nel design brutalista?

Caratteri monospazio, font di sistema come Arial e Times, e grotteschi pesanti. La scelta di solito segnala che il contenuto conta più dello stile.