Brutalistisk design: rå oppsett og hvordan du bruker dem

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.

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.

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

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

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

3. 3

   Gjør lenkene umiskjennelige

   Understreking og en tydelig farge. Brutalisme er en stil der de gamle standardinnstillingene i nettleseren er en fordel.

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

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 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 for et nettsted som føles både rått og ferdig.