L’essentiel en bref
- 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.
Sur cette page
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.
Ce qui s’est passé
Ce qui s’est passé
Ce qui s’est passé
Ce qui s’est passé
Ce qui s’est passé
À 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.
#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 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
.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 */
}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é 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 pour l’échelle.
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 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 pour un site à la fois brut et abouti.
Les questions qu’on nous pose
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.
Écrit par Gradiently
L’équipe derrière Gradiently, un outil de création construit autour des Marks : des dégradés vivants qui donnent à tout ce que vous créez votre propre signature.
Voir notre profil