# Brutalistinen design: pelkistetyt sommittelut ja käyttö

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

Brutalismi alkoi betonirakennuksista ja muuttui tavaksi suunnitella verkkosivuja ja julisteita ilman silottelua. Harkitusti käytettynä se on yksi tunnistettavimmista ilmeistä.

## The short version

- Brutalistinen design saa nimensä brutalistisesta arkkitehtuurista. Sana juontuu yleensä ranskan ilmauksesta béton brut, raakabetoni.
- Graafisessa ja verkkosuunnittelussa brutalismi tarkoittaa näkyvää rakennetta: ruudukoita, oletus- tai tasalevyisiä fontteja, kovia reunuksia ja vähäistä koristelua.
- Uusbrutalismi on ystävällisempi, viimeistellympi haara, jota käytetään sovelluksissa ja verkkosivuilla: tasaiset kirkkaat värit, paksut mustat ääriviivat ja terävät siirretyt varjot.
- Brutalistinen sommittelu voi näyttää huolettomalta ja olla silti helppokäyttöinen, kun tekstin kontrasti, linkkien tyyli ja navigointi pysyvät selkeinä.
- Brutalismi sopii parhaiten rehellistä, itsenäistä tai teknistä ilmettä hakeville brändeille ja huonommin rauhaa tai ylellisyyttä myyville.

**Brutalistinen design** näyttää rakenteensa piilottamisen sijaan: näkyvät ruudukot, oletus- tai tasalevyiset fontit, kovat mustat reunukset, tasainen väri ja lähes olematon koristelu. Nimi tulee brutalistisesta arkkitehtuurista ja yleensä ranskan ilmauksesta *béton brut*, raakabetoni. Verkkosivulla tai julisteessa brutalismi näyttää tarkoituksella viimeistelemättömältä, mikä erottaa sen pyöristettyjen korttien ja pehmeiden liukuvärien joukosta. Huolella toteutettuna sitä on silti helppo lukea ja käyttää.

## Brutalismin alkuperä: lyhyt historia

Ajatus alkoi arkkitehtuurissa toisen maailmansodan jälkeen. Arkkitehdit jättivät betonin paljaaksi, näyttivät rakennuksen toteutustavan ja suosivat toimintaa viimeistelyn sijaan. Graafiset ja verkkosuunnittelijat omaksuivat vuosikymmeniä myöhemmin asenteen, eivät betonia.

| Ajankohta | Mitä tapahtui |
| --- | --- |
| 1940-luvun lopulta vuoteen 1952 | Le Corbusier rakentaa Marseilleen Unité d’Habitationin paljaasta *béton brut* -betonista. Rakennusta pidetään useimmiten tyylin alkuna. |
| 1950-luvun alku | Alison ja Peter Smithson käyttävät ilmausta New Brutalism omasta pelkistetystä arkkitehtuuristaan. |
| 1955 | Kriitikko Reyner Banham julkaisee esseen *The New Brutalism* ja antaa liikkeelle teorian. |
| 2010-luku | Verkkosuunnittelijat ottavat sanan käyttöön karuille, käsin koodatun näköisille sivuille, jotka sivuuttavat silotellut mallipohjat. |
| 2020-luku | Uusbrutalismi leviää sovelluksiin ja startup-yrityksiin: tasaiset kirkkaat värit, paksut ääriviivat ja terävät siirretyt varjot. |

Betonista koodiin. Kaikkea yhdistää rehellisyys siitä, miten jokin on tehty.

## Miltä brutalistinen graafinen ja verkkosuunnittelu näyttää

- **Oletus- tai järjestelmäfontit:** Times, Arial, Courier ja tasalevyiset kirjasimet, usein yhdessä koossa, jolloin paino luo hierarkian.
- **Näkyvä rakenne:** jokaisen lohkon ympärillä reunus, ruudukkoviivat näkyvissä ja taulukot taulukon näköisiä.
- **Kovat reunat:** ei pyöristettyjä kulmia, pehmeitä varjoja tai sumennusta.
- **Tasainen väri:** valkoinen, musta, harmaa ja yksi tai kaksi voimakasta signaaliväriä.
- **Pelkistetyt linkit:** siniset alleviivatut linkit ja yksinkertaiset reunukselliset painikkeet.
- **Tiiviit tai epätasaiset sommittelut:** sisältö reunasta reunaan tai yksi valtava elementti rikkomassa ruudukkoa.

- Betoni: #e5e4e0
- Kiviaines: #9a9894
- Terva: #111111
- Valkoinen: #ffffff
- Signaalioranssi: #ff4800
- Linkinsininen: #0000ee

Klassinen brutalistinen paletti: betoninharmaat, musta, valkoinen ja yksi signaaliväri. `#0000ee` on monien selainten pitkään oletuksena käyttämä avaamattoman linkin sininen.

Brutalismi näkyy selvimmin typografiassa. Tasalevyinen fontti sanoo ”tehty käsin, koodilla”. Tavallinen päätteellinen fontti oletuskoossa sanoo ”emme vaivautuneet fonttien kanssa”, mikä on juuri tarkoitus. [Tasalevyiset fontit](https://gradiently.design/fi/guide/monospace-fonts) listaa hyviä vaihtoehtoja, jos haluat ilmeen ilman riippuvuutta lukijan järjestelmän fonteista.

## Brutalismin ja uusbrutalismin vertailu

Suuri osa nykyisten tuotesivustojen brutalismiksi kutsutusta tyylistä on uusbrutalismia, englanniksi myös neo brutalism. Se säilyttää kovat ääriviivat ja tasaiset värit mutta lisää ystävällisyyttä: pastelleja tai karkkivärejä, jykevää tekstiä ja yhtenäisen siirretyn varjon, joka saa kortit näyttämään sivun päällä lepääviltä.

### Brutalismi

- Harmaat, musta, valkoinen ja yksi signaaliväri
- Oletus- tai järjestelmäfontit
- Tarkoituksella kömpelö, joskus tyly
- Tuntuu asiakirjalta tai pienlehdeltä
- Yleinen portfolioissa sekä taide- ja kulttuurisivuilla

### Uusbrutalismi

- Tasaiset kirkkaat sävyt, kuten sitruuna, lila ja minttu
- Jykevät, persoonalliset groteskit
- Leikkisä ja helposti lähestyttävä
- Tuntuu sivulle liimatuilta tarroilta
- Yleinen startup-yrityksissä, sovelluksissa ja uutiskirjeissä

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

Uusbrutalistinen kortti ja painike. Sumennukseton varjo näyttää kiinteältä levyltä. Painettaessa painike liukuu sen kohdalle.

## Näin käytät brutalismia helppokäyttöisesti

Brutalismi saa näyttää rosoiselta. Se ei saa hämmentää. Vahvimmat brutalistiset sivut näyttävät suoraan, missä asiat ovat: suuri yksinkertainen navigointi, selvät linkit ja rehelliset otsikot. Tarkoituksellinen rumuus on tyyli, lukukelvoton teksti vain virhe.

1. **Riko yhtä sääntöä** Valitse ehkä oletusfontti, riitelevä väri tai epätasainen ruudukko. Kaikkien käytäntöjen rikkominen kerralla näyttää vialta, ei brutalismilta.
2. **Pidä kontrasti korkeana** Musta valkoisella tai valkoinen mustalla on sekä brutalistista että luettavaa. Harmaa harmaalla ei ole kumpaakaan. Tarkista teksti [värikontrastin ja saavutettavuuden](https://gradiently.design/fi/guide/color-contrast-accessibility) kannalta.
3. **Tee linkeistä yksiselitteisiä** Alleviivaus ja erottuva väri. Brutalismissa vanhat selaimen oletustyylit ovat vahvuus.
4. **Käytä rakennetta koristeena** Reunukset, viivat, numeroidut osiot ja näkyvät ruudukot antavat sivulle ilmeen. Kuvia ei tarvita, jotta se tuntuisi suunnitellulta.
5. **Anna yhden elementin olla valtava** Ruudukon rikkova valtava otsikko tai numero luo brutalistisen sommittelun jännitteen. Katso mittakaavaideoita artikkelista [rohkea graafinen suunnittelu](https://gradiently.design/fi/guide/bold-design-ideas).

Kenttämuistiinpanojen tyylinen pystyjulkaisu, jossa tekstuuritaustalla lukee Teosluettelo, 2019 alkaen

Brutalistinen julkaisu: yksinkertainen typografia, dokumentoivat sanat ja tausta, joka on pelkkää tekstuuria ilman silottelua.

## Kenelle brutalistinen design sopii

Brutalismi viestii, että välität sisällöstä enemmän kuin kuoresta. Se sopii riippumattomille kustantajille, levy-yhtiöille, gallerioille, arkkitehdeille, kehittäjätyökaluille ja suunnittelijoiden portfolioihin. Kylpylälle, korukaupalle tai lasten brändille se sopii huonommin, sillä niiden asiakkaat hakevat varmuutta ja rauhaa. Jos pidät selkeydestä mutta et rosoisuudesta, [sveitsiläinen design](https://gradiently.design/fi/guide/swiss-design) jakaa brutalismin ruudukkomieltymyksen paljon viimeistellympänä.

Voit myös lainata brutalismia osittain. Pelkistetty tasalevyinen typografia täyteläisen taustan päällä säilyttää rehellisyyden ja lisää tunnelmaa. Gradientlyn Mark toimii sellaisen tekstin takana hyvin, koska se pitää sanojen alla rauhallisen alueen ja valitsee vaalean tai tumman musteen riveittäin. Yhdistä se [laskeutumissivun suunnittelun](https://gradiently.design/fi/guide/landing-page-design) sommitteluihin, niin sivu tuntuu sekä rosoiselta että valmiilta.

## FAQ

### Mitä brutalistinen design on?

Tyyli, joka näyttää rakenteen ja välttää silottelua käyttämällä oletus- tai tasalevyisiä fontteja, kovia reunuksia, tasaisia värejä ja näkyviä ruudukoita. Nimi tulee brutalistisesta arkkitehtuurista.

### Mistä brutalismin nimi tulee?

Se johdetaan yleensä ranskan ilmauksesta *béton brut*, raakabetoni. Materiaali yhdistetään vahvasti sodanjälkeiseen arkkitehtuurityyliin.

### Mitä eroa on brutalismilla ja uusbrutalismilla?

Brutalismi on karua ja usein ankaraa: harmaita sävyjä ja oletusfontteja. Uusbrutalismi säilyttää paksut ääriviivat mutta lisää tasaiset kirkkaat värit, jykevän tekstin ja terävät siirretyt varjot.

### Heikentääkö brutalistinen verkkosuunnittelu käytettävyyttä?

Ei välttämättä. Kun tekstin kontrasti on korkea, linkit selvät ja navigointi yksinkertainen, brutalistinen sivu voi olla siloteltua helppokäyttöisempi.

### Mitä fontteja brutalistisessa designissa käytetään?

Tasalevyisiä kirjasimia, järjestelmäfontteja kuten Arial ja Times sekä raskaita groteskeja. Valinta kertoo yleensä, että sisältö on tyyliä tärkeämpää.