Brutalistinen design: pelkistetyt sommittelut ja käyttö

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.

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.

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

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

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

3. 3

   Tee linkeistä yksiselitteisiä

   Alleviivaus ja erottuva väri. Brutalismissa vanhat selaimen oletustyylit ovat vahvuus.

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

   Anna yhden elementin olla valtava

   Ruudukon rikkova valtava otsikko tai numero luo brutalistisen sommittelun jännitteen. Katso mittakaavaideoita artikkelista rohkea graafinen suunnittelu.

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 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 sommitteluihin, niin sivu tuntuu sekä rosoiselta että valmiilta.