Neobrutalisme vs. brutalisme: 7 belangrijke verschillen (met voorbeelden)

Dit gesprek heb ik vaker gevoerd dan ik kan tellen:

Klant: „We willen een brutalistische website.”

Ik: „Top. En wat betekent brutalistisch voor jou?”

Klant: „Je weet wel, dikke randen, felle kleuren, die gedurfde vibe.”

Ik: „Dat is neobrutalisme, geen brutalisme.”

Klant: „…is er een verschil?”

Ja. Een enorm. En als je in 2026 iets „brutaals” gaat ontwerpen, moet je precies weten wat je bouwt.

Brutalisme en neobrutalisme delen DNA, maar het zijn geen broers en zussen: het zijn verre neven die volledig verschillende kanten op gingen. De een werd geboren uit naoorlogse architectuur. De ander uit rebelse webontwerpers die genoeg hadden van afgeronde hoeken.

Laten we de 7 belangrijke verschillen ontleden die deze twee gedurfde designbewegingen scheiden.

Een korte geschiedenisles (beloofd, hij is relevant)

Voordat we in de verschillen duiken, zetten we het toneel.

Brutalisme: de architectuur van de jaren 50 ontmoet het web

Het brutalisme ontstond in de jaren 50 als architectuurbeweging. De naam komt van béton brut, Frans voor „ruw beton”, wat perfect beschrijft hoe brutalistische gebouwen eruitzien.

Denk aan massieve betonstructuren, zichtbare materialen, geometrische vormen en nul decoratie. Die gebouwen probeerden niet mooi te zijn. Ze waren functioneel, eerlijk en zonder schroom ruw.

Beroemde voorbeelden:

• Het Barbican Centre in Londen
• Boston City Hall
• Habitat 67 in Montreal

Spoel door naar het begin van de jaren 2000: webontwerpers begonnen brutalistische principes te lenen, rauwe HTML, minimale CSS, bewust „lelijke” lay-outs. Ze verwierpen de overladen, Flash-zware websites van die tijd.

Webbrutalisme werd bewust anti-design. Functie boven vorm. Inhoud boven glans. Eerlijkheid boven glimmerij.

Neobrutalisme: een in het digitale geboren rebellie

Het neobrutalisme dook rond 2015-2018 op als antwoord op een steeds uniformer webdesign. Waar brutalisme wegnam, sloeg neobrutalisme de tegenovergestelde weg in: alles opschroeven tot het maximum.

Dikke zwarte randen. Harde slagschaduwen. Contrastrijke kleuren. Asymmetrische grids. Het behield de durf van het brutalisme, maar voegde speelsheid, kleur en bewuste designkeuzes toe.

Neobrutalisme was geen anti-design, het was gedurfd design. Het verwierp de zachte, afgeronde, alles-pastel-esthetiek die de jaren 2010 domineerde.

Merken als Gumroad, Balenciaga en Spotify omarmden het. Ontwerpers op Dribbble en Behance maakten er een trend van. En vandaag? Het is een van de meest herkenbare designtalen die je kunt inzetten.

De 7 belangrijke verschillen

Nu de geschiedenis achter de rug is, kijken we naar wat deze stijlen echt scheidt.

1. Doel en filosofie

Brutalisme: functie boven alles

Brutalistisch design wortelt in minimalisme en eerlijkheid. De filosofie is simpel: toon de structuur. Verberg de steiger niet. Voeg geen decoratie toe om de decoratie.

In webdesign betekent dit:

• Minimale CSS
• Zichtbare HTML-structuur
• Basistypografie
• Geen animaties of tierlantijnen
• Inhoud is koning

Voorbeeld: Een brutalistische blog gebruikt waarschijnlijk de standaard systeemlettertypes, nul kleuren buiten zwart en wit, en simpele <ul>-lijsten voor de navigatie. Hij is leesbaar, functioneel en doet geen enkele moeite om mooi te zijn.

Neobrutalisme: gedurfde expressie, maar met opzet

Neobrutalisme behoudt de rauwheid, maar voegt persoonlijkheid toe. Het is geen anti-design, het is zelfverzekerd design. De filosofie luidt: val op, blijf hangen, maar offer nooit de bruikbaarheid op.

In webdesign betekent dit:

• Doordachte kleurpaletten (zwart/wit + felle accenten)
• Typografie als statement (dikke, geometrische lettertypes)
• Visuele hiërarchie via contrast en grootte
• Micro-interacties die de UX verrijken
• Design dat „met de hand gemaakt” oogt

Voorbeeld: Een neobrutalistische landingspagina gebruikt Archivo Black voor koppen, dikke randen van 4px op elk element, harde schaduwen 6px verschoven en een felgele CTA-knop. Gedurfd, maar elke keuze is weloverwogen.

Het verschil: Brutalisme vraagt: „Hebben we dit echt nodig?” Neobrutalisme vraagt: „Hoe maken we dit onmogelijk te negeren?”

2. Gebruik van kleur

Brutalisme: monochroom of niets

Brutalistisch design houdt vast aan zwart, wit en grijstinten. Verschijnt er kleur, dan is dat meestal per ongeluk (blauwe hyperlinks) of puur functioneel (rood voor fouten).

De reden? Kleur is decoratie, en brutalisme verwerpt decoratie.

Voorbeeldpalet:

Kopiëren:root {
  --background: #ffffff;
  --foreground: #000000;
  --gray: #666666;
}

Dat is alles. Drie kleuren. Vier als je je gewaagd voelt.

Neobrutalisme: contrastrijke kleurblokken

Neobrutalisme HOUDT van kleur, maar niet van subtiele pastels. We hebben het over gedurfde, verzadigde, schaamteloze tinten. Zwart en wit vormen de basis, daarna voeg je één of twee accentkleuren toe die knallen.

Populaire neobrutalistische paletten:

• Zwart + wit + neongeel (#FFDB33)
• Zwart + wit + felroze (#FF006E)
• Zwart + wit + cyberblauw (#00F0FF)

Voorbeeldpalet:

Kopiëren:root {
  --background: #ffffff;
  --foreground: #000000;
  --primary: #ffdb33;
  --accent: #ff006e;
  --border: #000000;
}

Kleuren zijn niet zomaar accenten: ze dienen nadruk, hiërarchie en energie.

Voorbeeld: Gumroad gebruikt felgele CTA's op zwarte achtergronden. Feastables speelt met neongroen en paars. Dit zijn geen toevalligheden, het is de kern van de merkidentiteit.

Het verschil: Brutalisme gebruikt kleur mondjesmaat of helemaal niet. Neobrutalisme zet het strategisch en gedurfd in.

3. Typografie

Brutalisme: systeemlettertypes en standaardwaarden

Brutalistisch design gebruikt vaak wat de browser meelevert:

• Arial
• Times New Roman
• Systeemlettertype-stacks

Waarom? Aangepaste lettertypes worden gezien als onnodige decoratie. De tekst moet leesbaar zijn, niet mooi.

Voorbeeld:

Kopiërenbody {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

Koppen zijn misschien iets groter, maar er is geen hiërarchie via gewicht of stijl. Het is gewone tekst, en dat met opzet.

Neobrutalisme: dikke, geometrische displaylettertypes

Neobrutalisme behandelt typografie als een hoofdrolspeler. Koppen zijn ENORM, dik en leunen vaak op opvallende geometrische lettertypes zoals:

• Archivo Black
• Bebas Neue
• Monument Extended
• Druk

Voorbeeld:

Kopiërenh1 {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(3rem, 10vw, 8rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
 
body {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1rem;
  line-height: 1.6;
}

Typografie bouwt de visuele hiërarchie op. De bodytekst blijft leesbaar, maar de koppen eisen aandacht.

Echt voorbeeld: Werp een blik op de website van Balenciaga. Hun typografie is massief, dik, onmisbaar. Dat is neobrutalisme.

Het verschil: Brutalisme gebruikt standaardlettertypes als anti-decoratie. Neobrutalisme maakt dikke typografie tot een volwaardig designelement.

4. Lay-out en structuur

Brutalisme: zichtbare grids, rauwe HTML

Brutalistische lay-outs omarmen de standaardflow van HTML. Je ziet:

• Lay-outs met één kolom
• Ongestylde lijsten
• Tabellen die op tabellen lijken
• Geen fancy grids of flexbox-trucs

De lay-out is functioneel en bootst vaak het vroege web na (denk aan GeoCities of Craigslist).

Voorbeeld: Een brutalistisch portfolio somt projecten op in een simpele <ul> met datums. Geen cards, geen hover-effecten, geen witruimte buiten de browserstandaarden.

Kopiëren<ul>
  <li>Project 1 - 2025</li>
  <li>Project 2 - 2024</li>
  <li>Project 3 - 2023</li>
</ul>

Simpel. Rauw. Geen CSS, misschien op een paar margeaanpassingen na.

Neobrutalisme: asymmetrische grids en gelaagdheid

Neobrutalistische lay-outs breken het grid, en dat met opzet. Je ziet:

• Asymmetrische plaatsing van elementen
• Overlappende secties
• Elementen die „zweven” of verschuiven
• Intensief gebruik van CSS Grid en Flexbox voor creatieve composities

Alles blijft functioneel, maar de lay-out wekt visuele interesse.

Voorbeeld: Een neobrutalistische hero-sectie zou kunnen hebben:

• Een grote kop verschoven naar links
• Een afbeelding met dikke rand die de kop overlapt
• Een asymmetrisch geplaatste CTA-knop
• Harde schaduwen die diepte creëren

Kopiëren<section className="grid grid-cols-2 gap-8 relative">
  <div className="col-span-2 md:col-span-1 z-10">
    <h1 className="text-7xl font-bold uppercase">Your Product</h1>
    <p className="text-xl mt-4">Bold designs for bold brands.</p>
    <Button className="mt-6">Get Started</Button>
  </div>
  <div className="absolute right-0 top-10 w-1/2 border-4 border-black shadow-[8px_8px_0_0_#000]">
    <img src="/hero.png" alt="Hero" />
  </div>
</section>

Het verschil: Brutalisme toont de structuur zoals ze is. Neobrutalisme ensceneert de structuur voor impact.

5. Randen en schaduwen

Brutalisme: geen of minimaal

Brutalistische ontwerpen gebruiken zelden randen of schaduwen. Verschijnen ze toch, dan zijn ze subtiel: een lijn van 1px om secties te scheiden, hooguit.

De reden? Schaduwen en randen zijn decoratief. Ze voegen visueel gewicht toe dat brutalisme vermijdt.

Voorbeeld:

Kopiëren.section {
  border-top: 1px solid #ccc;
  padding: 20px 0;
}

Dat is ongeveer het maximum aan decoratie dat brutalisme zich toestaat.

Neobrutalisme: dikke randen, harde schaduwen

Neobrutalisme draait VOLLEDIG om randen en schaduwen. Dikke randen (3-6px) en harde slagschaduwen zijn zijn visuele handtekening.

Elke card, knop, input en afbeelding krijgt:

• Een dikke zwarte rand (meestal 3-4px)
• Een harde, verschoven schaduw (geen vervaging, gewoon een verschoven massief kleurblok)

Voorbeeld:

Kopiëren.card {
  border: 4px solid #000;
  box-shadow: 6px 6px 0 0 #000;
  padding: 2rem;
  background: #fff;
}
 
.button {
  border: 3px solid #000;
  box-shadow: 4px 4px 0 0 #000;
  transition: transform 0.2s, box-shadow 0.2s;
}
 
.button:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 0 #000;
}

Het effect is onmiskenbaar: de elementen lijken op de pagina „gestempeld”.

Echt voorbeeld: Alle componenten van Neobrutalism gebruiken deze schaduwstijl. De cards van Gumroad. De producttegels van Feastables. Het is het visitekaartje van het neobrutalisme.

Het verschil: Brutalisme vermijdt elke visuele diepte. Neobrutalisme omarmt haar met harde schaduwen en dikke randen.

6. Interactiviteit en animatie

Brutalisme: statisch uit principe

Brutalistische websites zijn vaak statisch. Hover-effecten? Minimaal of geen. Animaties? Waarom zou je. Het design draait om inhoud, niet om interactie.

Zijn er interactieve elementen, dan gedragen ze zich precies als standaard-HTML:

• Links zijn blauw en onderstreept
• Knoppen zien eruit als <button>-elementen
• Formulieren zijn ongestylde <input>-velden

Voorbeeld:

Kopiëren<a href="/about">About</a>

Die link blijft blauw. Hij onderstreept bij hover. Meer niet.

Neobrutalisme: subtiele maar bedoelde micro-interacties

Neobrutalisme gebruikt micro-interacties om de UX te verrijken zonder te overdrijven. Bijvoorbeeld:

• Knoppen die bij hover licht verschuiven (alsof de schaduw beweegt)
• Links die van kleur veranderen of een dikke onderstreping krijgen
• Cards die bij interactie vergroten of opkomen
• Vloeiende paginaovergangen

De animaties zijn snel (100-300ms) en bedoeld, nooit storend.

Voorbeeld:

Kopiëren// Framer Motion button interaction
<motion.button
  whileHover={{
    x: 2,
    y: 2,
    boxShadow: "2px 2px 0 0 #000"
  }}
  whileTap={{
    x: 4,
    y: 4,
    boxShadow: "0px 0px 0 0 #000"
  }}
  transition={{ duration: 0.1 }}
  className="border-3 border-black shadow-[4px_4px_0_0_#000]"
>
  Click Me
</motion.button>

De knop „drukt in” bij het klikken en geeft tactiele feedback. Speels, maar zonder overdrijving.

Het verschil: Brutalisme is statisch en rauw. Neobrutalisme voegt aangename interacties toe die de bruikbaarheid versterken.

7. Esthetisch doel

Brutalisme: anti-esthetisch

Brutalisme verwerpt traditionele schoonheid. Het probeert niet goed te ogen in de conventionele zin, het probeert eerlijk, functioneel en soms confronterend te zijn.

Het esthetische doel is elke schijn af te pellen en de rauwe structuur eronder te tonen. Vinden gebruikers het lelijk, dan is dat oké, misschien is dat juist het punt.

Voorbeelden:

• Craigslist (onbedoeld brutalistisch)
• The Outline (bewust brutalistische journalistiek)
• De vroege redesigns van Bloomberg (inhoud eerst, nul decoratie)

Neobrutalisme: een gedurfde esthetiek

Neobrutalisme wil opgemerkt worden. Het is gedurfd, zelfverzekerd, memorabel. Het esthetische doel is opvallen terwijl je functioneel blijft.

Het is geen anti-schoonheid, het is een andere soort schoonheid. Rauw, geometrisch, speels en schaamteloos.

Voorbeelden:

• De productpagina's van Gumroad (gedurfd, direct, kleurrijk)
• De website van Feastables (speels, energiek, contrastrijk)
• De campagnepagina's van Spotify (experimenteel, asymmetrisch, levendig)

Het verschil: Brutalisme zegt: „Zo is het, neem het of laat het.” Neobrutalisme zegt: „Kijk hier eens, ik wed dat je zoiets nog nooit hebt gezien.”

Vergelijking naast elkaar

Laten we dit alles in een overzichtelijke tabel gieten:

Echte voorbeelden vergeleken

Laten we naar echte websites kijken om deze verschillen in actie te zien.

Brutalistisch voorbeeld: The Outline

Wat het brutalistisch maakt:

• Zwarte tekst op witte achtergrond, nul kleur
• Overal systeemlettertypes
• Minimale CSS, lay-out die inhoud vooropstelt
• Geen randen, geen schaduwen, geen decoratie
• Statisch, functioneel, rauw

Designkeuzes:

• Artikellay-out met één kolom
• Grote koppen, maar niet gestyled
• Afbeeldingen breken het grid op natuurlijke wijze
• De navigatie is een simpele lijst

Hij is leesbaar, functioneel en doet geen enkele moeite om trendy te zijn. Dat is brutalisme.

Neobrutalistisch voorbeeld: Gumroad

Wat het neobrutalistisch maakt:

• Een palet van zwart, wit en felgeel
• Dikke, stevige typografie
• Dikke randen op elke card en knop
• Harde slagschaduwen die diepte creëren
• Asymmetrische lay-outs met doordachte witruimte

Designkeuzes:

• Hero-sectie met een enorme kop en een gele CTA
• Productcards met randen van 4px en schaduwen van 6px
• Knoppen die bij hover verschuiven
• Hoog contrast, onmogelijk te negeren

Gedurfd, speels en ontworpen om op te vallen. Dat is neobrutalisme.

Wanneer brutalisme, wanneer neobrutalisme

Welke moet je dan kiezen? Dat hangt af van je doelen.

Gebruik brutalisme wanneer:

1. Inhoud alles is

Blogs, nieuwssites, documentatie: als de inhoud de hele bedoeling is, houdt brutalisme de aandacht daar.

2. Je maximale toegankelijkheid wilt

Standaard-HTML is ongelooflijk toegankelijk. De minimale CSS van brutalisme betekent minder dingen die kapot kunnen gaan voor schermlezers.

3. Je een standpunt inneemt

Brutalisme is confronterend. Als je merk antisysteem, DIY of bewust ruw is, past brutalisme.

4. Prestatie cruciaal is

Minimale CSS = snelle laadtijden. Brutalistische sites wegen vaak minder dan 100KB.

Gebruik neobrutalisme wanneer:

1. Je wilt opvallen

Startups, bureaus, creatieve portfolio's: als je moet blijven hangen, levert neobrutalisme.

2. Je merk persoonlijkheid heeft

Neobrutalisme werkt voor merken die gedurfd, speels, zelfverzekerd of rebels zijn.

3. Je een product bouwt

SaaS-dashboards, landingspagina's, e-commerce: neobrutalisme creëert visuele hiërarchie terwijl het uniek blijft.

4. Je een moderne esthetiek wilt

Neobrutalisme voelt actueel aan. Als het in 2026 trending is, is dat niet voor niets.

Kun je ze mengen?

Absoluut. Sommige van de beste ontwerpen lenen van beide.

Voorbeeld van een hybride aanpak:

• Neem de brutalistische filosofie van inhoud eerst over
• Voeg de gedurfde typografie en kleuren van neobrutalisme toe
• Houd lay-outs simpel (brutalistisch) maar voeg strategische randen/schaduwen toe (neobrutalistisch)
• Blijf spaarzaam met animaties (brutalistisch) maar voeg hover-states toe (neobrutalistisch)

De sleutel is opzet. Weet WAAROM je elk element kiest, in plaats van gewoon trends te kopiëren.

Veelgemaakte fouten

Fout nr. 1: alles „brutalistisch” noemen

Als je ontwerp dikke randen en felle kleuren heeft, is het neobrutalistisch. Brutalisme is rauwer en minder gedecoreerd.

Fout nr. 2: neobrutalisme „met opzet lelijk” maken

Neobrutalisme is gedurfd, niet kapot. Het moet nog steeds hiërarchie, leesbaarheid en bruikbaarheid hebben.

Fout nr. 3: overdrijven met brutalisme

Echt brutalisme kan hard zijn. Als gebruikers niet door je site kunnen navigeren of je inhoud niet kunnen lezen, ben je te ver gegaan.

Fout nr. 4: neobrutalisme halfslachtig aanpakken

Eén rand toevoegen en het neobrutalisme noemen werkt niet. Verbind je aan de esthetiek: dikke randen, felle kleuren, harde schaduwen.

Slotgedachten

Brutalisme en neobrutalisme zijn niet hetzelfde. Ze delen een rebelse geest, maar hun uitvoering ligt werelden uiteen.

Brutalisme pelt alles af. Het is rauw, eerlijk en tot in het extreme functioneel. Het verwerpt decoratie zonder omhaal.

Neobrutalisme schroeft alles op tot het maximum. Het is gedurfd, kleurrijk en zelfverzekerd. Het omarmt decoratie, zolang die bedoeld is.

Beide hebben hun plek. Brutalisme is perfect voor inhoudgerichte projecten die helderheid en prestatie nodig hebben. Neobrutalisme is ideaal voor merken die moeten opvallen en indruk moeten maken.

Het ergste wat je kunt doen? De twee verwarren of je halfslachtig aan een van beide verbinden. Ga je voor brutalistisch, ga dan voor rauw. Ga je voor neobrutalistisch, ga dan voor gedurfd.

Nu ken je het verschil. Gebruik het met verstand. 🚀

Wil je neobrutalistische interfaces bouwen? Neem een kijkje bij Neobrutalism: een complete UI-bibliotheek gebouwd voor gedurfde, memorabele ontwerpen. Componenten, blokken en templates die de neobrutalistische esthetiek omarmen zonder de bruikbaarheid op te offeren.