# Design Bauhaus : formes, couleurs primaires, idées durables

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

Une école qui n’a existé que quatorze ans façonne encore l’allure des affiches, des meubles, des apps et des logos. Voici ce que le Bauhaus enseignait vraiment, et comment l’emprunter sans en faire un pastiche.

## The short version

- Le Bauhaus était une école allemande d’art, d’artisanat et de design fondée par Walter Gropius à Weimar en 1919 et fermée à Berlin en 1933 sous la pression du gouvernement nazi.
- Le design Bauhaus privilégie les formes géométriques simples, les couleurs primaires, les polices sans empattement, les mises en page asymétriques et l’idée que la forme doit suivre la fonction.
- En 1923, Wassily Kandinsky demanda aux gens de l’école d’associer un triangle, un carré et un cercle au jaune, au rouge et au bleu ; il proposa un triangle jaune, un carré rouge et un cercle bleu.
- Herbert Bayer dessina en 1925 une police entièrement en minuscules appelée universal, un des premiers exemples de la volonté de l’école d’aller vers une typographie plus simple et plus rationnelle.
- Pour utiliser le style Bauhaus aujourd’hui, empruntez ses principes de structure claire et de couleurs limitées plutôt que de copier littéralement ses formes.

Le **design Bauhaus** est le style issu du Bauhaus, une école allemande d’art, d’artisanat et de design qui a fonctionné de 1919 à 1933. Il est connu pour ses formes géométriques simples, ses couleurs primaires, ses lettrages sans empattement, ses mises en page asymétriques et sa conviction qu’un bon design doit être utile, bien fait et adapté à la production industrielle. Ses idées sous-tendent encore la plupart du graphisme moderne, de la grille d’une affiche aux icônes de votre téléphone.

## Un bref historique du Bauhaus

| Année | Ce qui s’est passé |
| --- | --- |
| 1919 | Walter Gropius fonde le Staatliches Bauhaus à Weimar, réunissant l’enseignement des beaux-arts et de l’artisanat. |
| 1923 | Une grande exposition présente le travail de l’école ; Kandinsky mène son questionnaire sur les formes et les couleurs. |
| 1925 | L’école s’installe à Dessau. Herbert Bayer dessine sa police en minuscules universal. |
| 1926 | Le bâtiment de Dessau conçu par Gropius ouvre, avec ses murs de verre. |
| 1928 à 1930 | Hannes Meyer dirige l’école et la pousse vers l’architecture et la finalité sociale. |
| 1930 à 1933 | Ludwig Mies van der Rohe dirige ; l’école déménage à Berlin en 1932 et ferme en 1933. |
| Après 1933 | Les enseignants émigrent. Gropius et Marcel Breuer enseignent à Harvard, Mies à Chicago, Josef Albers au Black Mountain College puis à Yale. |

Quatorze ans, trois villes, trois directeurs. L’émigration après 1933 explique en grande partie pourquoi les idées se sont si largement diffusées.

Les enseignants étaient remarquables : Johannes Itten, Paul Klee, Wassily Kandinsky, László Moholy-Nagy et Josef Albers, entre autres. Albers écrivit plus tard *Interaction of Color*, toujours l’un des meilleurs livres sur la façon dont les couleurs s’influencent, ce qui relie directement à la [théorie des couleurs](https://gradiently.design/fr/guide/color-theory-basics) moderne.

## Couleurs et formes Bauhaus, en CSS

L’allure que la plupart des gens imaginent est du rouge, du jaune et du bleu avec du noir, sur un fond blanc cassé, construite avec des cercles, des carrés et des triangles. Le questionnaire de Kandinsky de 1923, qui proposait le triangle jaune, le carré rouge et le cercle bleu, est devenu le raccourci de toute l’école, même si le travail du Bauhaus utilisait bien plus de couleurs.

- Rouge Bauhaus: #be1e2d
- Jaune Bauhaus: #f2c12e
- Bleu Bauhaus: #21409a
- Noir: #111111
- Papier: #f1ece1

Une palette d’inspiration Bauhaus. Les primaires sont légèrement réchauffées et approfondies, plus proches de l’encre imprimée que du RVB d’écran.

- Cercle bleu: `radial-gradient(circle at 50% 50%, #21409a 0 38%, #f1ece1 38.5%)`
- Quart de cercle rouge: `radial-gradient(circle at 0% 100%, #be1e2d 0 60%, #f2c12e 60.5%)`
- Triangle jaune: `linear-gradient(135deg, #f2c12e 0 50%, #111111 50%)`
- Demi-cercle noir: `radial-gradient(circle at 50% 100%, #111111 0 45%, #21409a 45.5%)`
- Quatre quarts: `conic-gradient(from 0deg, #be1e2d 0 25%, #f2c12e 0 50%, #21409a 0 75%, #111111 0)`
- Rayures rouges: `repeating-linear-gradient(90deg, #be1e2d 0 24px, #f1ece1 24px 48px)`

Des formes Bauhaus faites uniquement en CSS avec des arrêts de couleur francs. Chacune est un seul dégradé que vous pouvez copier.

Les arrêts francs, où une couleur s’arrête exactement là où la suivante commence, sont la clé. Ils transforment un dégradé en forme nette. [Les formes en dégradé](https://gradiently.design/fr/guide/gradient-shapes) en couvre d’autres, et le code ci-dessous en combine quatre en une tuile.

```css
.bauhaus-tile {
  aspect-ratio: 1 / 1;
  background-color: #f1ece1;
  background-image:
    radial-gradient(circle at 100% 100%, #be1e2d 70%, transparent 70.5%),
    linear-gradient(135deg, #f2c12e 50%, transparent 50%),
    radial-gradient(circle, #21409a 45%, transparent 45.5%),
    linear-gradient(#111111, #111111);
  background-size: 50% 50%;
  background-position: 0 0, 100% 0, 0 100%, 100% 100%;
  background-repeat: no-repeat;
}
```

Une tuile Bauhaus en quatre parties : un quart de cercle rouge, un triangle jaune, un cercle bleu et un carré noir, chacun dans son quadrant.

## Typographie Bauhaus

Les designers du Bauhaus voulaient une typographie claire, rationnelle et moderne. Herbert Bayer soutenait que les capitales étaient inutiles et dessina universal, un alphabet géométrique sans aucune capitale ; beaucoup de documents imprimés de l’école abandonnèrent un temps les capitales. Les affiches composaient du texte sans empattement en blocs gras, souvent pivotés, avec de gros filets et barres pour organiser la page.

- **Sans empattement géométriques :** o rond, hampes droites, traits réguliers. Le Futura, sorti en 1927, n’est pas une police Bauhaus mais en partage l’esprit ; Jost sur Google Fonts est une police gratuite dans la même veine.
- **Titres en minuscules :** un discret clin d’œil à l’universal de Bayer.
- **Texte pivoté :** un texte qui monte le long de l’affiche donne le sentiment asymétrique et dynamique.
- **Barres et filets :** de gros traits noirs qui séparent et orientent, à la place des cadres.

## Comment utiliser le design Bauhaus aujourd’hui

Copier exactement les formes et les primaires donne quelque chose qui ressemble à une boutique de musée. La valeur durable du Bauhaus est dans ses principes, qui fonctionnent avec n’importe quelle palette.

1. **Partez de la fonction** Décidez ce que le design doit faire, comme annoncer une date ou vendre un produit, et laissez cela décider de la mise en page.
2. **Construisez sur une grille, puis cassez-la une fois** Posez tout sur une grille claire, puis laissez une forme ou une ligne la traverser. Cette tension est très Bauhaus. [Le style suisse](https://gradiently.design/fr/guide/swiss-design) a développé la grille plus loin.
3. **Limitez la couleur** Trois couleurs plus du noir et un fond papier. Remplacez les primaires par les couleurs de votre marque et la structure se lira toujours comme du Bauhaus.
4. **Utilisez les formes comme structure** Un cercle peut encadrer une photo, une barre peut porter un titre, un triangle peut désigner l’appel à l’action.
5. **Gardez un texte simple** Un sans empattement géométrique, deux graisses, grand et aligné à gauche.

Un post d’événement en portrait avec la forme suit la fonction en minuscules, un petit surtitre et une ligne de détail

Un titre en minuscules, un petit surtitre et un détail simple : la retenue Bauhaus sur un post d’événement moderne.

Une couverture en paysage avec Forme, couleur, ligne et un numéro au-dessus

Les mêmes principes sur une couverture 1600×1200, avec un arrière-plan vivant à la place des primaires à plat.

Ce second exemple montre la touche moderne. La mise en page Bauhaus reste stricte, mais l’arrière-plan est un Mark de Gradiently au lieu d’un rouge ou d’un bleu à plat : toujours une palette limitée, toujours structurelle, mais avec sa propre lumière et son grain, et une fois réservé il est à vous seul. Le texte rigoureux se pose sur sa zone la plus calme, donc la grille reste nette.

Si vous aimez le Bauhaus, comparez-le au glamour décoratif de [l’Art déco](https://gradiently.design/fr/guide/art-deco-design), à l’honnêteté brute du [design brutaliste](https://gradiently.design/fr/guide/brutalist-design), et à sa rébellion ludique des années 1980 dans [le design Memphis](https://gradiently.design/fr/guide/memphis-design).

## FAQ

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

Le style de l’école du Bauhaus en Allemagne, de 1919 à 1933 : formes géométriques, couleurs primaires, polices sans empattement, mises en page asymétriques et priorité à la fonction.

### Quelles sont les couleurs Bauhaus ?

Le rouge, le jaune et le bleu avec du noir et du blanc sont les couleurs les plus associées au Bauhaus, en partie à cause du questionnaire de Kandinsky de 1923 sur les formes et les couleurs.

### Quelle police dans le design Bauhaus ?

Des sans empattement géométriques. Herbert Bayer dessina en 1925 une police en minuscules appelée universal ; aujourd’hui, le Futura ou le Jost gratuit donnent une sensation similaire.

### Pourquoi le Bauhaus a-t-il fermé ?

L’école a fermé en 1933 à Berlin sous la pression du gouvernement nazi, qui voyait dans son modernisme un danger politique.

### Comment faire une affiche de style Bauhaus ?

Utilisez une grille claire, quelques formes géométriques franches, trois couleurs plus du noir sur un fond papier, et un texte sans empattement aligné à gauche ou pivoté.