# Brutalistisk design: rå oppsett og hvordan du bruker dem

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

Brutalismen startet som betongbygg og ble en måte å designe nettsider og plakater på som nekter å pynte seg. Brukt med vilje er den et av de mest gjenkjennelige uttrykkene du kan velge.

## The short version

- Brutalistisk design har navnet sitt fra brutalistisk arkitektur, et ord som som regel føres tilbake til det franske béton brut, som betyr rå betong.
- I grafisk design og webdesign betyr brutalisme synlig struktur: synlige rutenett, standardskrift eller monospace, harde rammer og lite pynt.
- Nybrutalisme er en vennligere, mer polert avlegger brukt i apper og på nettsider, med flate klare farger, tykke svarte konturer og harde, forskjøvne skygger.
- Brutalistiske oppsett kan se slurvete ut og likevel være lette å bruke, så lenge tekstkontrast, lenkestil og navigasjon forblir tydelige.
- Brutalisme passer best for merkevarer som vil virke ærlige, uavhengige eller tekniske, og dårligere for merkevarer som selger ro eller luksus.

**Brutalistisk design** er en stil som viser strukturen sin i stedet for å skjule den: synlige rutenett, standardskrift eller monospace, harde svarte rammer, flate farger og nesten ingen ornamentikk. Navnet kommer fra brutalistisk arkitektur, som regel ført tilbake til det franske *béton brut*, rå betong. På en nettside eller en plakat ser brutalisme bevisst upolert ut, og det får den til å skille seg ut i en verden av avrundede kort og myke gradienter. Brukt med omhu er den fortsatt helt lett å lese og navigere.

## Hvor brutalismen kommer fra: en kort historie

Ideen startet i arkitekturen etter andre verdenskrig. Arkitekter lot betongen stå bar, viste hvordan et bygg var laget og prioriterte funksjon over finish. Grafiske designere og webdesignere tok opp holdningen flere tiår senere, ikke betongen.

| Når | Hva skjedde |
| --- | --- |
| Slutten av 1940-tallet til 1952 | Le Corbusier bygger Unité d’Habitation i Marseille i synlig *béton brut*, bygget som oftest nevnes som starten på stilen. |
| Tidlig på 1950-tallet | Alison og Peter Smithson bruker uttrykket New Brutalism om sin egen nedstrippede arkitektur. |
| 1955 | Kritikeren Reyner Banham publiserer essayet *The New Brutalism* og gir bevegelsen sin teori. |
| 2010-tallet | Webdesignere tar i bruk ordet om rå nettsider som ser håndkodet ut og ignorerer polerte maler. |
| 2020-tallet | Nybrutalismen sprer seg gjennom apper og oppstartsbedrifter: flate klare farger, tykke konturer og harde, forskjøvne skygger. |

Fra betong til kode. Den felles ideen gjennom alt sammen er ærlighet om hvordan noe er laget.

## Slik ser brutalistisk grafisk design og webdesign ut

- **Standard- eller systemskrift:** Times, Arial, Courier og monospace-skrifter, ofte i én størrelse der vekten står for hierarkiet.
- **Synlig struktur:** rammer rundt hver blokk, synlige rutenettlinjer, tabeller som ser ut som tabeller.
- **Harde kanter:** ingen avrundede hjørner, ingen myke skygger, ingen uskarphet.
- **Flate farger:** hvitt, svart, grått og én eller to høylytte signalfarger.
- **Rå lenker:** blå, understrekede lenker, enkle knapper med ramme.
- **Tette eller ujevne oppsett:** innhold stablet kant i kant, eller ett enormt element som bryter rutenettet.

- Betong: #e5e4e0
- Tilslag: #9a9894
- Tjære: #111111
- Hvit: #ffffff
- Signaloransje: #ff4800
- Lenkeblå: #0000ee

En klassisk brutalistisk palett: betonggrått, svart, hvitt og én signalfarge. `#0000ee` er den blåfargen for ubesøkte lenker som mange nettlesere lenge har brukt som standard.

Typografien er der brutalismen synes tydeligst. En monospace-skrift sier «laget for hånd, i kode»; en enkel antikva i standardstørrelse sier «vi brydde oss ikke om skrifter», og det er nettopp poenget. [Monospace-skrifter](https://gradiently.design/nb/guide/monospace-fonts) lister opp gode valg hvis du vil ha uttrykket uten å være avhengig av det leserens system har installert.

## Brutalisme og nybrutalisme sammenlignet

Det meste du ser kalt brutalistisk på produktnettsider i dag, er nybrutalisme, noen ganger skrevet neobrutalisme. Den beholder de harde konturene og de flate fargene, men legger til vennlighet: pastell eller klare godterifarger, kraftig skrift og en heltrukken, forskjøvet skygge som får kort til å se ut som de ligger oppå siden.

### Brutalisme

- Grått, svart, hvitt, én signalfarge
- Standard- eller systemskrifter
- Bevisst klossete, noen ganger fiendtlig
- Føles som et dokument eller et fanzine
- Vanlig på porteføljer, kunst- og kulturnettsteder

### Nybrutalisme

- Flate, klare farger som sitron, syrin og mint
- Kraftige groteskskrifter med personlighet
- Leken og tilgjengelig
- Føles som klistremerker på en side
- Vanlig hos oppstartsbedrifter, apper og nyhetsbrev

```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 nybrutalistisk kort og en knapp. Skyggen har ingen uskarphet, så den leses som en solid plate; trykker du på knappen, glir den på plass.

## Slik bruker du brutalistisk design uten å skade brukervennligheten

Brutalisme får lov til å se grov ut. Den får ikke lov til å være forvirrende. De sterkeste brutalistiske nettstedene er rett på sak om hvor ting er: stor, enkel navigasjon, tydelige lenker, ærlige overskrifter. Stygt med vilje er en stil; uleselig tekst er bare en feil.

1. **Velg én regel å bryte** Kanskje er det standardskrift, kanskje en farge som skjærer seg, kanskje et ujevnt rutenett. Bryter du alle konvensjoner på en gang, leses det som ødelagt, ikke brutalt.
2. **Hold kontrasten høy** Svart på hvitt eller hvitt på svart er svært brutalistisk og svært lesbart. Grått på grått er ingen av delene. Sjekk teksten med [fargekontrast og tilgjengelighet](https://gradiently.design/nb/guide/color-contrast-accessibility) i tankene.
3. **Gjør lenkene umiskjennelige** Understreking og en tydelig farge. Brutalisme er en stil der de gamle standardinnstillingene i nettleseren er en fordel.
4. **Bruk struktur som dekor** Rammer, linjer, nummererte seksjoner og synlige rutenett gir siden uttrykket, så du trenger ikke bilder for å få den til å føles designet.
5. **La ett element være enormt** En gigantisk overskrift eller et tall som bryter rutenettet, gir et brutalistisk oppsett spenningen. Se [dristig grafisk design](https://gradiently.design/nb/guide/bold-design-ideas) om skala.

Et stående innlegg i feltnotatstil med teksten Verkliste, 2019 til nå, over en teksturert bakgrunn

Brutalistisk sans på et innlegg: enkel skrift, dokumentariske ord og en bakgrunn som er bare tekstur og ingen polering.

## Hvem brutalistisk design passer for

Brutalisme forteller folk at du bryr deg mer om innholdet enn om innpakningen. Det passer uavhengige forlag, plateselskaper, gallerier, arkitekter, utviklerverktøy og designeres porteføljer. Det passer langt dårligere for et spa, en gullsmed eller en merkevare for barn, fordi de kundene kjøper trygghet og ro. Liker du klarheten, men ikke grovheten, deler [sveitsisk design](https://gradiently.design/nb/guide/swiss-design) brutalismens kjærlighet til rutenettet med langt mer polering.

Du kan også låne brutalismen delvis. Et rått typografisk system i monospace oppå en rik bakgrunn beholder for eksempel ærligheten og legger til atmosfære. En Mark fra Gradiently fungerer godt bak den typen enkel skrift, fordi den holder et rolig område under ordene og velger lys eller mørk tekst per linje. Kombiner den med oppsettene i [design av landingssider](https://gradiently.design/nb/guide/landing-page-design) for et nettsted som føles både rått og ferdig.

## FAQ

### Hva er brutalistisk design?

En stil som viser frem strukturen og unngår polering, med standardskrift eller monospace, harde rammer, flate farger og synlige rutenett. Den har navnet sitt fra brutalistisk arkitektur.

### Hvor kommer navnet brutalisme fra?

Det føres som regel tilbake til det franske *béton brut*, som betyr rå betong, materialet som forbindes mest med etterkrigstidens arkitekturstil.

### Hva er forskjellen på brutalisme og nybrutalisme?

Brutalisme er rå og ofte nøktern, i grått med standardskrifter. Nybrutalisme beholder de tykke konturene, men legger til flate klare farger, kraftig skrift og harde, forskjøvne skygger.

### Er brutalistisk webdesign dårlig for brukervennligheten?

Det trenger det ikke være. Hold tekstkontrasten høy, lenkene tydelige og navigasjonen enkel, så kan et brutalistisk nettsted være lettere å bruke enn et polert.

### Hvilke skrifter brukes i brutalistisk design?

Monospace-skrifter, systemskrifter som Arial og Times, og tunge groteskskrifter. Valget signaliserer som regel at innholdet betyr mer enn stilen.