# Design brutaliste : mises en page brutes, mode d’emploi

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

Le brutalisme est né dans les bâtiments en béton et est devenu une façon de concevoir sites web et affiches qui refuse le poli. Utilisé avec intention, c’est l’un des styles les plus reconnaissables que l’on puisse choisir.

## The short version

- Le design brutaliste tire son nom de l’architecture brutaliste, un mot généralement rattaché au français béton brut, c’est-à-dire du béton à l’état brut.
- En design graphique et web, le brutalisme signifie une structure apparente : grilles visibles, texte par défaut ou à chasse fixe, bordures dures et peu de décoration.
- Le néobrutalisme est un dérivé plus amical et plus soigné, utilisé dans les apps et sites web, avec des couleurs vives à plat, des contours épais noirs et des ombres décalées dures.
- Les mises en page brutalistes peuvent paraître négligées tout en restant faciles à utiliser, tant que le contraste du texte, le style des liens et la navigation restent clairs.
- Le brutalisme convient surtout aux marques qui veulent paraître honnêtes, indépendantes ou techniques, et moins à celles qui vendent le calme ou le luxe.

Le **design brutaliste** est un style qui montre sa structure au lieu de la cacher : grilles visibles, texte par défaut ou à chasse fixe, bordures noires dures, couleurs à plat et presque aucun ornement. Son nom vient de l’architecture brutaliste, généralement rattachée au français *béton brut*. Sur un site web ou une affiche, le brutalisme paraît volontairement non poli, ce qui le fait ressortir dans un monde de cartes arrondies et de dégradés doux. Utilisé avec soin, il reste parfaitement lisible et facile à parcourir.

## D’où vient le brutalisme : un bref historique

L’idée est née en architecture après la Seconde Guerre mondiale. Les architectes laissaient le béton nu, montraient comment un bâtiment était fait et préféraient la fonction à la finition. Les designers graphiques et web ont repris l’attitude des décennies plus tard, pas le béton.

| Quand | Ce qui s’est passé |
| --- | --- |
| Fin des années 1940 à 1952 | Le Corbusier construit l’Unité d’Habitation à Marseille en *béton brut* apparent, le bâtiment le plus cité comme début du style. |
| Début des années 1950 | Alison et Peter Smithson emploient l’expression New Brutalism pour leur propre architecture dépouillée. |
| 1955 | Le critique Reyner Banham publie son essai *The New Brutalism*, qui donne sa théorie au mouvement. |
| Années 2010 | Les designers web adoptent le mot pour des sites bruts, qui semblent codés à la main et ignorent les modèles polis. |
| Années 2020 | Le néobrutalisme se répand dans les apps et les startups : couleurs vives à plat, contours épais et ombres décalées dures. |

Du béton au code. L’idée commune à tout cela est l’honnêteté sur la façon dont une chose est faite.

## À quoi ressemble le design graphique et web brutaliste

- **Texte par défaut ou système :** Times, Arial, Courier et polices à chasse fixe, souvent à une seule taille avec la graisse qui fait la hiérarchie.
- **Structure apparente :** bordures autour de chaque bloc, lignes de grille affichées, tableaux qui ressemblent à des tableaux.
- **Arêtes dures :** pas de coins arrondis, pas d’ombres douces, pas de flou.
- **Couleurs à plat :** blanc, noir, gris et une ou deux couleurs signal bien franches.
- **Liens bruts :** liens bleus soulignés, boutons simples avec une bordure.
- **Mises en page denses ou irrégulières :** contenu empilé bord à bord, ou un élément énorme qui casse la grille.

- Béton: #e5e4e0
- Granulat: #9a9894
- Goudron: #111111
- Blanc: #ffffff
- Orange signal: #ff4800
- Bleu de lien: #0000ee

Une palette brutaliste classique : gris béton, noir, blanc et une couleur signal. `#0000ee` est le bleu des liens non visités que de nombreux navigateurs utilisent depuis longtemps par défaut.

C’est dans le texte que le brutalisme se voit le plus. Une police à chasse fixe dit « fait à la main, en code » ; un serif simple à la taille par défaut dit « nous ne nous sommes pas souciés des polices », et c’est le but. [Les polices à chasse fixe](https://gradiently.design/fr/guide/monospace-fonts) en liste de bonnes si vous voulez l’effet sans dépendre de ce que le système du lecteur possède.

## Brutalisme et néobrutalisme comparés

Presque tout ce que l’on appelle brutaliste sur les sites de produits aujourd’hui est du néobrutalisme. Il garde les contours durs et la couleur à plat mais ajoute de l’amabilité : des vives pastel ou bonbon, un texte épais et une ombre décalée pleine qui donne l’impression que les cartes sont posées sur la page.

### Brutalisme

- Gris, noir, blanc, une couleur signal
- Polices par défaut ou système
- Volontairement maladroit, parfois hostile
- Fait penser à un document ou un fanzine
- Courant sur les portfolios, les sites d’art et de culture

### Néobrutalisme

- Vives à plat comme citron, lilas et menthe
- Grotesques épaisses avec du caractère
- Ludique et accessible
- Fait penser à des autocollants sur une page
- Courant sur les startups, les apps et les newsletters

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

Une carte et un bouton néobrutalistes. L’ombre n’a aucun flou, elle se lit donc comme une dalle pleine ; appuyer sur le bouton le fait glisser en place.

## Comment utiliser le design brutaliste sans nuire à l’utilisabilité

Le brutalisme a le droit de paraître rugueux. Il n’a pas le droit d’être confus. Les meilleurs sites brutalistes sont directs sur l’emplacement des choses : grande navigation simple, liens évidents, titres honnêtes. La laideur choisie est un style ; un texte illisible n’est qu’un bug.

1. **Choisissez une règle à briser** Ce peut être le texte par défaut, une couleur qui jure, une grille irrégulière. Briser toutes les conventions à la fois paraît cassé, pas brut.
2. **Gardez un contraste élevé** Noir sur blanc ou blanc sur noir est très brutaliste et très lisible. Gris sur gris n’est ni l’un ni l’autre. Vérifiez le texte avec [contraste des couleurs et accessibilité](https://gradiently.design/fr/guide/color-contrast-accessibility) en tête.
3. **Rendez les liens indiscutables** Des soulignements et une couleur distincte. Le brutalisme est un style où les anciens réglages par défaut des navigateurs sont un atout.
4. **Utilisez la structure comme décoration** Bordures, filets, sections numérotées et grilles visibles donnent son allure à la page, vous n’avez donc pas besoin d’images pour qu’elle paraisse dessinée.
5. **Laissez un élément être énorme** Un titre ou un chiffre géant qui casse la grille donne sa tension à une mise en page brutaliste. Voyez [le graphisme audacieux](https://gradiently.design/fr/guide/bold-design-ideas) pour l’échelle.

Un post en portrait au style de carnet de terrain avec Index des œuvres, 2019 à aujourd’hui, sur un arrière-plan texturé

Une sensibilité brutaliste sur un post : texte simple, mots documentaires et un arrière-plan tout en texture et sans poli.

## À qui convient le design brutaliste

Le brutalisme dit aux gens que vous vous souciez plus du contenu que de l’emballage. Cela convient aux éditeurs indépendants, aux labels, aux galeries, aux architectes, aux outils pour développeurs et aux portfolios de designers. Cela convient bien moins à un spa, un bijoutier ou une marque pour enfants, car ces clients achètent du réconfort et du calme. Si vous aimez la clarté mais pas la rudesse, [le style suisse](https://gradiently.design/fr/guide/swiss-design) partage l’amour de la grille du brutalisme avec bien plus de soin.

Vous pouvez aussi emprunter une partie du brutalisme. Un système typographique brut à chasse fixe sur un arrière-plan riche, par exemple, garde l’honnêteté tout en ajoutant de l’atmosphère. Un Mark de Gradiently fonctionne bien derrière ce genre de texte simple, car il garde une zone calme sous les mots et choisit une encre claire ou sombre par ligne. Associez-le aux mises en page de [la conception de landing page](https://gradiently.design/fr/guide/landing-page-design) pour un site à la fois brut et abouti.

## FAQ

### Qu’est-ce que le design brutaliste ?

Un style qui expose la structure et évite le poli, avec du texte par défaut ou à chasse fixe, des bordures dures, des couleurs à plat et des grilles visibles. Il porte le nom de l’architecture brutaliste.

### D’où vient le nom brutalisme ?

On le rattache généralement au français *béton brut*, le matériau le plus associé au style architectural d’après-guerre.

### Quelle différence entre brutalisme et néobrutalisme ?

Le brutalisme est brut et souvent austère, en gris avec des polices par défaut. Le néobrutalisme garde les contours épais mais ajoute des couleurs vives à plat, un texte épais et des ombres décalées dures.

### Le web design brutaliste nuit-il à l’utilisabilité ?

Pas forcément. Gardez un fort contraste du texte, des liens évidents et une navigation simple, et un site brutaliste peut être plus facile à utiliser qu’un site poli.

### Quelles polices dans le design brutaliste ?

Des polices à chasse fixe, des polices système comme Arial et Times, et des grotesques lourdes. Le choix signale généralement que le contenu compte plus que le style.