# Brutalistisk design: rå layouts og hvordan du bruger dem

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

Brutalismen begyndte som betonbygninger og blev en måde at designe hjemmesider og plakater på, der afviser pynt. Brugt med vilje er det et af de mest genkendelige udtryk, du kan vælge.

## The short version

- Brutalistisk design har sit navn fra brutalistisk arkitektur, et ord, der som regel føres tilbage til det franske béton brut, som betyder rå beton.
- I grafisk design og webdesign betyder brutalisme synlig struktur: synlige gitre, standardskrift eller monospace, hårde kanter og næsten ingen dekoration.
- Neobrutalisme er en venligere og mere poleret afart, der bruges i apps og på hjemmesider, med flade stærke farver, tykke sorte konturer og hårde forskudte skygger.
- Brutalistiske layouts kan se skødesløse ud og alligevel være nemme at bruge, så længe tekstkontrast, linkstil og navigation er tydelige.
- Brutalismen fungerer bedst for brands, der vil virke ærlige, uafhængige eller tekniske, og dårligere for brands, der sælger ro eller luksus.

**Brutalistisk design** er en stil, der viser sin struktur i stedet for at skjule den: synlige gitre, standardskrift eller monospace, hårde sorte rammer, flade farver og næsten ingen ornamentik. Navnet kommer fra brutalistisk arkitektur, som regel ført tilbage til det franske *béton brut*, rå beton. På en hjemmeside eller en plakat ser brutalismen bevidst upoleret ud, hvilket får den til at skille sig ud i en verden af afrundede kort og bløde gradienter. Brugt med omtanke er den stadig helt nem at læse og navigere i.

## Hvor brutalismen kommer fra: en kort historie

Idéen opstod i arkitekturen efter Anden Verdenskrig. Arkitekter lod betonen stå bar, viste, hvordan en bygning var lavet, og satte funktion over finish. Grafiske designere og webdesignere overtog holdningen årtier senere, ikke betonen.

| Hvornår | Hvad skete der |
| --- | --- |
| Sidst i 1940’erne til 1952 | Le Corbusier bygger Unité d’Habitation i Marseille i synlig *béton brut*, den bygning, der oftest nævnes som stilens begyndelse. |
| Tidligt i 1950’erne | Alison og Peter Smithson bruger udtrykket New Brutalism om deres egen afklædte arkitektur. |
| 1955 | Kritikeren Reyner Banham udgiver essayet *The New Brutalism* og giver bevægelsen dens teori. |
| 2010’erne | Webdesignere tager ordet til sig om rå, tilsyneladende håndkodede sider, der ignorerer polerede skabeloner. |
| 2020’erne | Neobrutalismen spreder sig gennem apps og startups: flade stærke farver, tykke konturer og hårde forskudte skygger. |

Fra beton til kode. Den fælles idé gennem det hele er ærlighed om, hvordan en ting er lavet.

## Hvordan brutalistisk grafisk design og webdesign ser ud

- **Standardskrift eller systemskrift:** Times, Arial, Courier og monospace-skrifter, ofte i én størrelse, hvor vægten står for hierarkiet.
- **Synlig struktur:** rammer om hver blok, synlige gitterlinjer og tabeller, der ligner tabeller.
- **Hårde kanter:** ingen afrundede hjørner, ingen bløde skygger, ingen sløring.
- **Flade farver:** hvid, sort, grå og en eller to højlydte signalfarver.
- **Rå links:** blå understregede links og enkle knapper med en ramme.
- **Tætte eller ujævne layouts:** indhold stablet kant mod kant, eller ét kæmpestort element, der bryder gitteret.

- Beton: #e5e4e0
- Tilslag: #9a9894
- Tjære: #111111
- Hvid: #ffffff
- Signalorange: #ff4800
- Linkblå: #0000ee

En klassisk brutalistisk palette: betongrå, sort, hvid og én signalfarve. `#0000ee` er den blå farve til ubesøgte links, som mange browsere længe har brugt som standard.

Skriften er der, hvor brutalismen viser sig tydeligst. En monospace-skrift siger »lavet i hånden, i kode«, og en enkel serif i standardstørrelse siger »vi gad ikke bruge tid på skrifttyper«, hvilket er pointen. [Monospace-skrifter](https://gradiently.design/da/guide/monospace-fonts) har en liste over gode valg, hvis du vil have udtrykket uden at være afhængig af, hvad læserens system nu har.

## Brutalisme og neobrutalisme sammenlignet

Det meste, der i dag kaldes brutalistisk på produkthjemmesider, er neobrutalisme, nogle gange skrevet neo brutalisme. Den beholder de hårde konturer og de flade farver, men tilføjer venlighed: pastel- eller slikfarver, kraftig skrift og en massiv forskudt skygge, der får kort til at se ud, som om de ligger oven på siden.

### Brutalisme

- Grå, sort, hvid og én signalfarve
- Standard- eller systemskrifter
- Bevidst akavet, nogle gange fjendtlig
- Føles som et dokument eller et fanzine
- Udbredt på portfolioer og kunst- og kultursider

### Neobrutalisme

- Flade stærke farver som citron, lilla og mint
- Kraftige grotesker med personlighed
- Legende og imødekommende
- Føles som klistermærker på en side
- Udbredt hos startups, apps og nyhedsbreve

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

Et neobrutalistisk kort og en knap. Skyggen har ingen sløring, så den læses som en massiv plade, og når du trykker på knappen, glider den på plads.

## Sådan bruger du brutalistisk design uden at skade brugervenligheden

Brutalismen må gerne se rå ud. Den må ikke være forvirrende. De stærkeste brutalistiske sider er ligefremme om, hvor tingene er: stor og enkel navigation, tydelige links, ærlige overskrifter. Grimhed som valg er en stil, men ulæselig tekst er bare en fejl.

1. **Vælg én regel at bryde** Måske er det standardskrift, måske en skurrende farve, måske et ujævnt gitter. Bryder du alle konventioner på én gang, virker det ødelagt og ikke brutalt.
2. **Hold kontrasten høj** Sort på hvid eller hvid på sort er meget brutalistisk og meget læseligt. Grå på grå er ingen af delene. Tjek teksten med [farvekontrast og tilgængelighed](https://gradiently.design/da/guide/color-contrast-accessibility) for øje.
3. **Gør links umiskendelige** Understregninger og en tydelig farve. Brutalismen er en af de stile, hvor browsernes gamle standarder er en fordel.
4. **Brug struktur som dekoration** Rammer, streger, nummererede afsnit og synlige gitre giver siden dens udtryk, så du ikke behøver billeder for at få den til at føles designet.
5. **Lad ét element være kæmpestort** En kæmpeoverskrift eller et tal, der bryder gitteret, giver et brutalistisk layout dets spænding. Se [fed grafisk design](https://gradiently.design/da/guide/bold-design-ideas) for skala.

Et opslag i højformat i stil med feltnoter med teksten Værkfortegnelse, 2019 til nu, over en struktureret baggrund

Brutalistisk sensibilitet i et opslag: enkel skrift, dokumentariske ord og en baggrund, der er al tekstur og ingen finish.

## Hvem brutalistisk design passer til

Brutalismen fortæller folk, at du går mere op i indholdet end i indpakningen. Det passer til uafhængige forlag, pladeselskaber, gallerier, arkitekter, udviklerværktøjer og designeres portfolioer. Det passer langt dårligere til et spa, en juveler eller et børnebrand, fordi de kunder køber tryghed og ro. Kan du lide klarheden men ikke råheden, deler [Schweizisk design](https://gradiently.design/da/guide/swiss-design) brutalismens kærlighed til gitteret med langt mere finish.

Du kan også låne brutalismen delvist. Et råt, monospace-baseret skriftsystem oven på en rig baggrund bevarer for eksempel ærligheden og tilføjer stemning. En Gradiently Mark fungerer godt bag den slags enkel skrift, fordi den holder et roligt område under ordene og vælger lys eller mørk skrift linje for linje. Kombinér den med layoutene i [design af landingssider](https://gradiently.design/da/guide/landing-page-design) for en side, der føles både rå og færdig.

## FAQ

### Hvad er brutalistisk design?

En stil, der blotlægger strukturen og undgår finish, med standardskrift eller monospace, hårde rammer, flade farver og synlige gitre. Den er opkaldt efter brutalistisk arkitektur.

### Hvor kommer navnet brutalisme fra?

Det føres som regel tilbage til det franske *béton brut*, som betyder rå beton, det materiale, der oftest forbindes med efterkrigstidens arkitekturstil.

### Hvad er forskellen på brutalisme og neobrutalisme?

Brutalismen er rå og ofte spartansk, i grå toner med standardskrifter. Neobrutalismen beholder de tykke konturer, men tilføjer flade stærke farver, kraftig skrift og hårde forskudte skygger.

### Er brutalistisk webdesign dårligt for brugervenligheden?

Det behøver det ikke at være. Hold tekstkontrasten høj, links tydelige og navigationen enkel, så kan en brutalistisk side være nemmere at bruge end en poleret.

### Hvilke skrifttyper bruges i brutalistisk design?

Monospace-skrifter, systemskrifter som Arial og Times og tunge grotesker. Valget signalerer som regel, at indholdet betyder mere end stylingen.