# Bauhaus-ontwerp: vormen, primaire kleuren en blijvende ideeën

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

Een school die maar veertien jaar bestond, bepaalt nog steeds hoe posters, meubels, apps en logo’s eruitzien. Dit is wat het Bauhaus echt leerde, en hoe je het leent zonder een pastiche te maken.

## The short version

- Het Bauhaus was een Duitse school voor kunst, ambacht en ontwerp, in 1919 in Weimar opgericht door Walter Gropius en in 1933 in Berlijn gesloten onder druk van de nazi-regering.
- Bauhaus-ontwerp geeft de voorkeur aan eenvoudige geometrische vormen, primaire kleuren, letters zonder schreven, asymmetrische lay-outs en het idee dat vorm de functie volgt.
- In 1923 vroeg Wassily Kandinsky mensen op de school een driehoek, vierkant en cirkel bij geel, rood en blauw te zoeken; hij stelde een gele driehoek, een rood vierkant en een blauwe cirkel voor.
- Herbert Bayer ontwierp in 1925 een lettertype met alleen kleine letters, universal, een vroeg voorbeeld van de drang van de school naar eenvoudiger, rationeler letterwerk.
- Om de Bauhaus-stijl vandaag te gebruiken leen je de principes van heldere structuur en beperkte kleur, in plaats van de vormen letterlijk te kopiëren.

**Bauhaus-ontwerp** is de stijl die voortkwam uit het Bauhaus, een Duitse school voor kunst, ambacht en ontwerp die liep van 1919 tot 1933. Het staat bekend om eenvoudige geometrische vormen, primaire kleuren, letters zonder schreven, asymmetrische lay-outs en de overtuiging dat goed ontwerp bruikbaar, goed gemaakt en geschikt voor industriële productie moet zijn. De ideeën liggen nog onder het meeste moderne grafisch ontwerp, van het raster in een poster tot de iconen op je telefoon.

## Een korte geschiedenis van het Bauhaus

| Jaar | Wat er gebeurde |
| --- | --- |
| 1919 | Walter Gropius sticht het Staatliches Bauhaus in Weimar en brengt beeldende kunst en ambachtsonderwijs samen. |
| 1923 | Een grote tentoonstelling toont het werk van de school; Kandinsky houdt zijn enquête over vorm en kleur. |
| 1925 | De school verhuist naar Dessau. Herbert Bayer ontwerpt zijn lettertype universal met alleen kleine letters. |
| 1926 | Het door Gropius ontworpen gebouw in Dessau opent, glazen wanden en al. |
| 1928 tot 1930 | Hannes Meyer leidt de school en duwt haar richting architectuur en maatschappelijk doel. |
| 1930 tot 1933 | Ludwig Mies van der Rohe is directeur; de school verhuist in 1932 naar Berlijn en sluit in 1933. |
| Na 1933 | Docenten emigreren. Gropius en Marcel Breuer doceren in Harvard, Mies in Chicago, Josef Albers op Black Mountain College en later Yale. |

Veertien jaar, drie steden, drie directeuren. De emigratie na 1933 verklaart voor een groot deel waarom de ideeën zich zo wijd verspreidden.

De docenten waren bijzonder: onder anderen Johannes Itten, Paul Klee, Wassily Kandinsky, László Moholy-Nagy en Josef Albers. Albers schreef later *Interaction of Color*, nog steeds een van de beste boeken over hoe kleuren elkaar veranderen, wat direct aansluit op de moderne [kleurentheorie](https://gradiently.design/nl/guide/color-theory-basics).

## Bauhaus-kleuren en -vormen, met CSS

De look die de meeste mensen voor zich zien is rood, geel en blauw met zwart, op een gebroken witte ondergrond, opgebouwd uit cirkels, vierkanten en driehoeken. Kandinsky’s enquête uit 1923, die de gele driehoek, het rode vierkant en de blauwe cirkel voorstelde, werd het stenogram voor de hele school, ook al gebruikte het werk van het Bauhaus veel meer kleuren dan dat.

- Bauhaus-rood: #be1e2d
- Bauhaus-geel: #f2c12e
- Bauhaus-blauw: #21409a
- Zwart: #111111
- Papier: #f1ece1

Een palet geïnspireerd op het Bauhaus. De primaire kleuren zijn iets warmer en dieper gemaakt, dichter bij gedrukte inkt dan bij scherm-RGB.

- Blauwe cirkel: `radial-gradient(circle at 50% 50%, #21409a 0 38%, #f1ece1 38.5%)`
- Rode kwartcirkel: `radial-gradient(circle at 0% 100%, #be1e2d 0 60%, #f2c12e 60.5%)`
- Gele driehoek: `linear-gradient(135deg, #f2c12e 0 50%, #111111 50%)`
- Zwarte halve cirkel: `radial-gradient(circle at 50% 100%, #111111 0 45%, #21409a 45.5%)`
- Vier kwarten: `conic-gradient(from 0deg, #be1e2d 0 25%, #f2c12e 0 50%, #21409a 0 75%, #111111 0)`
- Rode strepen: `repeating-linear-gradient(90deg, #be1e2d 0 24px, #f1ece1 24px 48px)`

Bauhaus-vormen puur in CSS gemaakt met harde kleurstops. Elk is één verloop dat je kunt kopiëren.

Harde stops, waar de ene kleur precies eindigt waar de volgende begint, zijn de sleutel. Ze veranderen een verloop in een scherpe vorm. [Verloopvormen](https://gradiently.design/nl/guide/gradient-shapes) behandelt er meer, en de code hieronder combineert er vier tot één tegel.

```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;
}
```

Een Bauhaus-tegel in vier delen: een rode kwartcirkel, een gele driehoek, een blauwe cirkel en een zwart vierkant, elk in een eigen kwadrant.

## Bauhaus-typografie

Bauhaus-ontwerpers wilden letters die helder, rationeel en modern waren. Herbert Bayer betoogde dat hoofdletters overbodig waren en tekende universal, een geometrisch alfabet zonder hoofdletters; veel gedrukt materiaal van de school liet een tijd de hoofdletters weg. Posters zetten letters zonder schreven in vette blokken, vaak gedraaid, met dikke lijnen en balken om de pagina te ordenen.

- **Geometrische letters zonder schreven:** ronde o, rechte stokken, gelijkmatige lijnen. Futura, uitgebracht in 1927, is geen Bauhaus-lettertype maar deelt de geest; Jost op Google Fonts is een gratis lettertype in dezelfde lijn.
- **Koppen in kleine letters:** een stille knipoog naar Bayers universal.
- **Gedraaide tekst:** letters die langs de zijkant van een poster lopen geven het asymmetrische, dynamische gevoel.
- **Balken en lijnen:** dikke zwarte lijnen die verdelen en richting geven, in plaats van kaders.

## Hoe je Bauhaus-ontwerp vandaag gebruikt

Als je de vormen en primaire kleuren precies kopieert, ontstaat iets wat eruitziet als een museumwinkel. De blijvende waarde van het Bauhaus zit in de principes, die met elk palet werken.

1. **Begin bij de functie** Bepaal wat het ontwerp moet doen, zoals een datum aankondigen of een product verkopen, en laat dat de lay-out bepalen.
2. **Bouw op een raster en doorbreek het één keer** Leg alles op een helder raster en laat dan één vorm of lijn erdoorheen snijden. Die spanning is heel Bauhaus. [Zwitsers ontwerp](https://gradiently.design/nl/guide/swiss-design) ontwikkelde het raster verder.
3. **Beperk de kleur** Drie kleuren plus zwart en een papieren ondergrond. Verwissel de primaire kleuren voor je merkkleuren en de structuur leest nog steeds als Bauhaus.
4. **Gebruik vormen als structuur** Een cirkel kan een foto omlijsten, een balk kan een kop dragen, een driehoek kan naar de call-to-action wijzen.
5. **Houd de letters eenvoudig** Eén geometrische letter zonder schreven, twee gewichten, groot gezet en links uitgelijnd.

Een staande evenementpost met de tekst vorm volgt functie in kleine letters met een kleine eyebrow en een regel detail

Een kop in kleine letters, een kleine eyebrow en eenvoudig detail: Bauhaus-soberheid op een moderne evenementpost.

Een liggend omslag met de tekst Vorm, kleur, lijn en een nummer erboven

Dezelfde principes op een omslag van 1600×1200, met een levende achtergrond in plaats van vlakke primaire kleuren.

Dat tweede voorbeeld toont de moderne draai. De Bauhaus-lay-out blijft streng, maar de achtergrond is een Mark van Gradiently in plaats van vlak rood of blauw: nog steeds een beperkt palet, nog steeds structureel, maar met eigen licht en korrel, en eenmaal geclaimd is hij helemaal van jou. De strakke letters staan op het rustigste gebied, zodat het raster scherp blijft.

Hou je van het Bauhaus, vergelijk het dan met de decoratieve glamour van [art-decoontwerp](https://gradiently.design/nl/guide/art-deco-design), de rauwe eerlijkheid van [brutalistisch ontwerp](https://gradiently.design/nl/guide/brutalist-design) en de speelse opstandigheid van de jaren tachtig in [Memphis-ontwerp](https://gradiently.design/nl/guide/memphis-design).

## FAQ

### Wat is Bauhaus-ontwerp?

De stijl van de Bauhaus-school in Duitsland, van 1919 tot 1933: geometrische vormen, primaire kleuren, letters zonder schreven, asymmetrische lay-outs en een focus op functie.

### Wat zijn de Bauhaus-kleuren?

Rood, geel en blauw met zwart en wit zijn de kleuren die er het meest mee worden geassocieerd, deels door Kandinsky’s enquête over vorm en kleur uit 1923.

### Welk lettertype wordt in Bauhaus-ontwerp gebruikt?

Geometrische letters zonder schreven. Herbert Bayer tekende in 1925 een lettertype met alleen kleine letters, universal; vandaag geven Futura of het gratis Jost een vergelijkbaar gevoel.

### Waarom sloot het Bauhaus?

De school sloot in 1933 in Berlijn onder druk van de nazi-regering, die haar modernisme politiek verdacht vond.

### Hoe maak ik een poster in Bauhaus-stijl?

Gebruik een helder raster, een paar vette geometrische vormen, drie kleuren plus zwart op een papieren ondergrond en eenvoudige letters zonder schreven, links uitgelijnd of gedraaid.