Design web brutaliste : exemples en direct et CSS à copier | We.Inc
Le design web brutaliste et néo-brutaliste expliqué avec quatre exemples originaux en direct, un créateur de boutons à ombres franches et bordures épaisses, et le CSS à copier.
Le design web brutaliste ramène une page à sa structure brute : polices par défaut ou système, bordures visibles, liens simples et peu de décoration. Le néo-brutalisme, son cousin plus aimable, garde les contours noirs épais mais ajoute des couleurs vives en aplat et des ombres décalées franches. Dans les deux cas, ce sont surtout des choix CSS : les exemples ci-dessous sont donc modifiables et chaque règle peut être copiée.
Brutaliste ou néo-brutaliste
Caractéristique
Brutaliste
Néo-brutaliste
Typographie
Système ou monospace, souvent aux tailles par défaut
Grotesque grasse ou sans-serif système, en grand
Couleur
Noir, blanc, éventuellement un bleu de lien
Aplats saturés : jaune, rose, vert menthe
Bordures
Filets de 1px, tableaux, boîtes visibles
Contours noirs pleins de 2 à 4px
Ombres
Aucune
Décalage franc, sans flou
Impression
Brute, comme un document
Ludique, comme un autocollant
Les galeries de sites brutalistes montrent des captures d'écran impossibles à inspecter. Ici, chaque exemple est une création originale écrite en HTML et CSS simples, affichée en direct, modifiable sur place et libre de copie, avec en prime un créateur pour le bouton néo-brutaliste que la plupart des gens viennent chercher.
Réglez le créateur de boutons : épaisseur de bordure, décalage de l'ombre, couleur de remplissage et arrondi des coins.
Survolez l'aperçu pour ressentir l'effet d'appui, puis copiez le CSS.
Descendez jusqu'aux quatre exemples et modifiez leur code pour voir le résultat changer.
Gardez en tête les remarques sur l'accessibilité avant de mettre en ligne une palette criarde.
Une ombre franche n'a pas besoin de flou : mettez à 0 la troisième longueur de box-shadow pour obtenir un bloc décalé net.
Un texte noir sur jaune, menthe ou rose saturé se lit généralement bien ; un texte blanc sur ces aplats, généralement pas. Vérifiez chaque paire.
Brut ne veut pas dire négligé. Gardez un pas d'espacement cohérent, même quand les bordures et la typographie paraissent rudes.
Laissez les contours de focus visibles et épais, ce qui colle d'ailleurs au style.
Réservez ce look aux portfolios, fanzines, événements et outils destinés aux designers ; testez-le auprès de votre public avant de l'utiliser sur le site d'une banque ou d'une clinique.
Questions fréquentes
Qu'est-ce que le design web brutaliste ?
C'est un style qui montre l'ossature d'une page web au lieu de la peaufiner : polices par défaut, angles durs, grilles ou tableaux visibles, liens soulignés et peu d'images. Il vise l'honnêteté et la rapidité plutôt que la joliesse.
Qu'est-ce que le néo-brutalisme ?
Le néo-brutalisme emprunte au brutalisme ses contours épais et sa mise en page directe, et les associe à des couleurs vives en aplat, une typographie massive et des ombres décalées pleines. On le voit souvent sur les landing pages de produits et les interfaces d'applications qui veulent paraître audacieuses et décontractées.
Comment créer une ombre néo-brutaliste en CSS ?
Utilisez box-shadow avec un décalage x et y, un flou à zéro et une couleur pleine, par exemple box-shadow: 6px 6px 0 #000. Associez-la à border: 3px solid #000. Au survol, déplacez l'élément vers l'ombre et réduisez le décalage pour donner une impression d'appui.
Le design brutaliste nuit-il à l'accessibilité ?
Pas par nature. Du HTML simple, de vrais liens et des contours marqués sont souvent très accessibles. Les problèmes viennent des paires de couleurs peu contrastées, d'un texte par défaut minuscule et de la suppression des styles de focus : vérifiez ces points comme sur n'importe quel site.
Là où le style fonctionne
Le brutalisme convient aux sites qui veulent afficher une personnalité ou un esprit fait maison : pages personnelles, studios, publications, sites de musique et d'événements. Sa sobriété rend aussi les pages légères, car il y a peu d'images et peu de polices web à télécharger.
Il s'adapte moins bien quand les visiteurs ont besoin d'être rassurés, par exemple dans la santé, la finance ou les tunnels de paiement. Dans ces cas, une mise en page plus calme avec une seule touche brutaliste, comme un appel à l'action encadré, peut être un meilleur compromis.
Vous l'approprier sans copier
La plupart des pages brutalistes partagent un vocabulaire plutôt qu'un modèle, vous avez donc rarement besoin d'emprunter à qui que ce soit. Choisissez un motif structurel, comme une grille visible, des sections numérotées ou un bandeau défilant, et répétez-le de façon cohérente.
Choisissez une palette de noir, de blanc et d'au plus deux accents en aplat. Laissez ensuite l'espacement, les bordures et la taille du texte faire le reste du travail, au lieu des dégradés, des photos ou des ombres douces.
Quatre exemples originaux
Page d'accueil façon document brut
Monospace système, liens bleus par défaut et un simple tableau. Tout le style tient en quelques règles.
Carte de tarifs néo-brutaliste
Contour épais, aplat de couleur et ombre franche sur la carte comme sur le bouton.
Galerie à grille visible
Les bordures servent aussi de lignes de grille : la structure devient la décoration.
Formulaire de newsletter brutaliste
Un champ avec libellé et un bouton aux contours épais, avec un anneau de focus marqué qui colle au style.
Créateur de boutons néo-brutalistes
Ajustez la bordure, le décalage de l'ombre, le remplissage et l'arrondi. Les valeurs de départ produisent ce CSS :