Brutalistisk design: rå layouts og hvordan du bruger dem

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.

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.

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 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.

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

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. 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. 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 for øje.

3. 3

   Gør links umiskendelige

   Understregninger og en tydelig farve. Brutalismen er en af de stile, hvor browsernes gamle standarder er en fordel.

4. 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. 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 for skala.

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 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 for en side, der føles både rå og færdig.