# Brutalistisch design: rauwe opmaak en hoe je die gebruikt

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

Brutalisme begon als betonnen gebouwen en werd een manier om websites en posters te ontwerpen die weigert gepolijst te zijn. Met opzet gebruikt is het een van de meest herkenbare looks die je kunt kiezen.

## The short version

- Brutalistisch design ontleent zijn naam aan brutalistische architectuur, een woord dat meestal wordt herleid tot het Franse béton brut, oftewel rauw beton.
- In grafisch en webdesign betekent brutalisme zichtbare structuur: zichtbare rasters, standaard of monospaced letters, harde randen en weinig versiering.
- Neobrutalisme is een vriendelijker, gepolijstere variant in apps en websites, met vlakke felle kleuren, dikke zwarte contouren en harde verschoven schaduwen.
- Brutalistische opmaak kan er onverzorgd uitzien en toch makkelijk te gebruiken zijn, zolang tekstcontrast, linkstijl en navigatie duidelijk blijven.
- Brutalisme werkt het best voor merken die eerlijk, onafhankelijk of technisch willen overkomen, en minder voor merken die rust of luxe verkopen.

**Brutalistisch design** is een stijl die zijn structuur laat zien in plaats van te verbergen: zichtbare rasters, standaard of monospaced letters, harde zwarte randen, vlakke kleur en bijna geen ornament. De naam komt van brutalistische architectuur, meestal herleid tot het Franse *béton brut*, rauw beton. Op een website of poster ziet brutalisme er bewust ongepolijst uit, waardoor het opvalt in een wereld van afgeronde kaarten en zachte verlopen. Met zorg gebruikt is het nog steeds prima te lezen en te navigeren.

## Waar brutalisme vandaan komt: een korte geschiedenis

Het idee begon in de architectuur na de Tweede Wereldoorlog. Architecten lieten beton onbewerkt, toonden hoe een gebouw gemaakt was en kozen functie boven afwerking. Grafisch en webontwerpers namen de houding tientallen jaren later over, niet het beton.

| Wanneer | Wat er gebeurde |
| --- | --- |
| Eind jaren 1940 tot 1952 | Le Corbusier bouwt de Unité d’Habitation in Marseille in zichtbaar *béton brut*, het gebouw dat het vaakst wordt genoemd als begin van de stijl. |
| Begin jaren 1950 | Alison en Peter Smithson gebruiken de term New Brutalism voor hun eigen kale architectuur. |
| 1955 | De criticus Reyner Banham publiceert zijn essay *The New Brutalism*, dat de beweging haar theorie geeft. |
| Jaren 2010 | Webontwerpers nemen het woord over voor rauwe, met de hand gecodeerd ogende sites die gepolijste sjablonen negeren. |
| Jaren 2020 | Neobrutalisme verspreidt zich via apps en startups: vlakke felle kleuren, dikke contouren en harde verschoven schaduwen. |

Van beton tot code. Het gedeelde idee in dit alles is eerlijkheid over hoe iets gemaakt is.

## Hoe brutalistisch grafisch en webdesign eruitziet

- **Standaard- of systeemletters:** Times, Arial, Courier en monospaced lettertypen, vaak op één grootte waarbij het gewicht de hiërarchie doet.
- **Zichtbare structuur:** randen om elk blok, zichtbare rasterlijnen, tabellen die op tabellen lijken.
- **Harde randen:** geen afgeronde hoeken, geen zachte schaduwen, geen blur.
- **Vlakke kleur:** wit, zwart, grijs en een of twee luide signaalkleuren.
- **Rauwe links:** blauwe onderstreepte links, gewone knoppen met een rand.
- **Dichte of ongelijke opmaak:** inhoud van rand tot rand gestapeld, of één enorm element dat het raster doorbreekt.

- Beton: #e5e4e0
- Toeslagmateriaal: #9a9894
- Teer: #111111
- Wit: #ffffff
- Signaaloranje: #ff4800
- Linkblauw: #0000ee

Een klassiek brutalistisch palet: betongrijs, zwart, wit en één signaalkleur. `#0000ee` is het blauw van niet-bezochte links dat veel browsers al lang als standaard gebruiken.

Bij letters laat brutalisme zich het duidelijkst zien. Een monospaced lettertype zegt ‘met de hand gemaakt, in code’; een gewone schreefletter op standaardgrootte zegt ‘we hebben ons niet met lettertypen beziggehouden’, en dat is precies de bedoeling. [Monospace-lettertypen](https://gradiently.design/nl/guide/monospace-fonts) noemt goede keuzes als je de look wilt zonder af te hangen van wat het systeem van de lezer heeft.

## Brutalisme en neobrutalisme vergeleken

Het meeste wat tegenwoordig brutalistisch heet op productwebsites is neobrutalisme. Het houdt de harde contouren en vlakke kleur maar voegt vriendelijkheid toe: pastel of snoepkleurige felle tinten, dikke letters en een massieve verschoven schaduw waardoor kaarten lijken te liggen op de pagina.

### Brutalisme

- Grijs, zwart, wit, één signaalkleur
- Standaard- of systeemletters
- Bewust onhandig, soms vijandig
- Voelt als een document of een zine
- Gangbaar op portfolio’s, kunst- en cultuursites

### Neobrutalisme

- Vlakke felle kleuren zoals citroen, lila en munt
- Dikke grotesken met karakter
- Speels en toegankelijk
- Voelt als stickers op een pagina
- Gangbaar bij startups, apps en nieuwsbrieven

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

Een neobrutalistische kaart en knop. De schaduw heeft geen blur, dus hij leest als een massieve plaat; de knop indrukken schuift hem op zijn plek.

## Zo gebruik je brutalistisch design zonder gebruiksgemak te schaden

Brutalisme mag er ruw uitzien. Het mag niet verwarrend zijn. De sterkste brutalistische sites zijn botweg over waar dingen staan: grote gewone navigatie, duidelijke links, eerlijke koppen. Lelijkheid uit keuze is een stijl; onleesbare tekst is gewoon een bug.

1. **Kies één regel om te breken** Misschien standaardletters, misschien een botsende kleur, misschien een ongelijk raster. Alle conventies tegelijk breken leest als kapot, niet als brutaal.
2. **Houd het contrast hoog** Zwart op wit of wit op zwart is heel brutalistisch en heel leesbaar. Grijs op grijs is geen van beide. Controleer tekst met [kleurcontrast en toegankelijkheid](https://gradiently.design/nl/guide/color-contrast-accessibility) in gedachten.
3. **Maak links onmiskenbaar** Onderstrepingen en een aparte kleur. Brutalisme is een van de stijlen waarin de oude browserstandaarden een pluspunt zijn.
4. **Gebruik structuur als decoratie** Randen, lijnen, genummerde secties en zichtbare rasters geven de pagina zijn look, dus je hebt geen beelden nodig om het ontworpen te laten voelen.
5. **Laat één element enorm zijn** Een gigantische kop of een getal dat het raster doorbreekt, geeft een brutalistische opmaak zijn spanning. Zie [gedurfd grafisch ontwerp](https://gradiently.design/nl/guide/bold-design-ideas) voor schaal.

Een staande post in de stijl van veldnotities met de tekst Overzicht van werk, 2019 tot nu, op een getextureerde achtergrond

Brutalistisch gevoel op een post: gewone letters, documentaire woorden en een achtergrond die alleen textuur is en geen afwerking.

## Voor wie brutalistisch design past

Brutalisme vertelt mensen dat je meer om de inhoud geeft dan om de verpakking. Dat past bij onafhankelijke uitgevers, platenlabels, galeries, architecten, ontwikkelaarstools en portfolio’s van ontwerpers. Het past veel minder bij een spa, een juwelier of een kindermerk, omdat die klanten geruststelling en rust kopen. Vind je de helderheid fijn maar de ruwheid niet, dan deelt [Zwitsers design](https://gradiently.design/nl/guide/swiss-design) de liefde van het brutalisme voor het raster met veel meer afwerking.

Je kunt brutalisme ook gedeeltelijk lenen. Een rauw, monospaced lettersysteem op een rijke achtergrond bijvoorbeeld behoudt de eerlijkheid en voegt sfeer toe. Een Gradiently Mark werkt goed achter zulke gewone letters, omdat hij een rustig gebied onder de woorden houdt en per regel lichte of donkere inkt kiest. Combineer het met de opmaak uit [landingspagina-ontwerp](https://gradiently.design/nl/guide/landing-page-design) voor een site die zowel rauw als af voelt.

## FAQ

### Wat is brutalistisch design?

Een stijl die structuur laat zien en afwerking vermijdt, met standaard of monospaced letters, harde randen, vlakke kleur en zichtbare rasters. Hij is genoemd naar brutalistische architectuur.

### Waar komt de naam brutalisme vandaan?

Hij wordt meestal herleid tot het Franse *béton brut*, rauw beton, het materiaal dat het meest met de naoorlogse architectuurstijl wordt geassocieerd.

### Wat is het verschil tussen brutalisme en neobrutalisme?

Brutalisme is rauw en vaak streng, in grijstinten met standaardletters. Neobrutalisme houdt de dikke contouren maar voegt vlakke felle kleuren, dikke letters en harde verschoven schaduwen toe.

### Is brutalistisch webdesign slecht voor gebruiksgemak?

Dat hoeft niet. Houd tekstcontrast hoog, links duidelijk en navigatie eenvoudig, en een brutalistische site kan makkelijker te gebruiken zijn dan een gepolijste.

### Welke lettertypen worden gebruikt in brutalistisch design?

Monospaced lettertypen, systeemletters zoals Arial en Times, en zware grotesken. De keuze laat meestal zien dat inhoud belangrijker is dan styling.