top of page

Brutalistinen web design

Updated: Jun 28, 2022

Brutalismilla viitataan yleensä modernistiseen arkkitehtuurin suuntaukseen, mutta brutalismin käsite on levinnyt myös verkkosivusuunnitteluun. Puhdaslinjainen muotokieli, raa'at betonipinnat ja valumuottien jäljet ovat arkkitehtuurisen brutalistisen suuntauksen kulmakiviä, mutta mitä brutalismi sitten on web designissa?


"In its ruggedness and lack of concern to look comfortable or easy, Brutalism can be seen as a reaction by a younger generation to the lightness, optimism, and frivolity of today's web design."


Brutalistisia sivuja suunniteltaessa kaunis ulkoasu ei ole tärkeää, vaan jossain tapauksissa rumuutta jopa tavoitellaan. Esimerkiksi välinpitämätön, raaka, ruma, rohkea ja epämiellyttävä ovat hyviä adjektiiveja kuvaamaan brutalistista designia. Brutalistinen verkkosivusuunnittelu ei kuitenkaan ole sama asia kuin huonosti suunniteltu sivu. Tarkoituksenmukaisuus ja aikomus erottavat ne toisistaan. Näin ollen brutalismin ja huonon suunnittelun erottaminen voi tuottaa välillä hankaluuksia, mikäli sivun tarkoitusperä ei ole selvillä.


Miksi brutalistisia verkkosivuja sitten tehdään?

Yksi syy saattaa löytyä nuoresta sukupolvesta, joka kaipaa jotain uutta. Niin kuin vaihtuvat tyylisuuntaukset, brutalistinen design toimii kapinana nykyisiä käsityksiä ja kauneusihanteita vastaan, on mielenkiintoista ja erottuu joukosta. Nykyaikana on hankala erottua muista verkkosivu-designilla, ellei tee jotain radikaalia ja muista suuresti poikkeavaa. Yksi tapa tähän on heittää romukoppaan hyvän suunnittelun perusteet ja totutut säännökset, jota brutalistinen design tekee.


Millaista brutalistinen design on?

Matt Stewart on koonnut listan brutalistisen suunnittelun piirteistä, joita nyt lainaan tässä:

  • Musta tai valkoinen tausta

  • Ei liukuväriä tai varjoja

  • Päällekäiset elementit

  • Symmetrian puute

  • Täyteen ahdettu design

  • Ei selkeää hierarkiaa

  • Yksivälinen typografia

  • Yhden fontin käyttö

  • Kontrastinen väripaletti

  • Animaatioiden puute

  • Harvat kuvat

  • Yksinkertainen tai olematon navigointi

  • Yksisivuisuus

Nämä eivät toki ole mitään sääntöjä, joidenka tulee täyttyä brutalistisessa designissa, vaan ennemminkin tuntomerkkejä tyylisuunnan tunnistamiseen. Punk -tyyppisen luonteensa takia tuntuisi väärältä asettaa brutalistiselle designille säännöstöä siitä, mitä sen tulee täyttää ollakseen brutalismia.


Brutalismi ei ole pelkästään ulkoasukeskeinen lähestymistapa, vaan siinä voidaan vaikuttaa myös käyttökokemukseen ja käytettävyyteen. Näihin perinteisesti liitetyt hyvät lähestymistavat johdonmukaisuudesta ja selkeydestä saatetaan lähestymistavassa hylätä kokonaan tai tehdä jotain yllättävää, mikä poikkeaa totutusta.


Milloin brutalistista designia kannattaa sitten käyttää yritystoiminnassa?

Kaikkeen brutalistinen design ei sovi, kuten esimerkiksi yritystoimintaan, jonka tulisi herättää luottamusta ja asiantuntijuutta. Omasta mielestäni sillä on kuitenkin potentiaalia esimerkiksi modernien, rohkeiden ja erilaisten, esimerkiksi muotituotteita valmistavien, yritysten strategiassa tai bändien ja taiteilijoiden verkkosivuina. Kaikki pohjautuu siihen, millaista asiakaskuntaa ja kohdeyleisöä yritetään tavoitella ja millaisella alalla toimitaan.


Pari esimerkkiä

(Kuvakaappaus 28.6.2022)

Selettin sivuilla on paljon vilkkuvia neon-elementtejä, epäsuhtaisesti liikkuvia animaatioita ja ylisuuria tekstejä.

En myöskään kuollakseni keksinyt, miten tuotteet lisätään ostoskoriin, mutta en tiedä onko tämä tahallista vai vaan huonoa suunnittelua. Jotenkin näin isolta ja leikkisältä design firmalta odottaisin tahallisuutta.


(Kuvakaappaus 28.6.2022)

CMX:llä on yksisivuinen ratkaisu ilman kuvia ja CSS-muotoiluja.




Linkkejä:

19 views0 comments

Related Posts

See All

5W:tä

Viisi W:tä, viisi W:tä ja yksi H tai kuusi W:tä, ovat joukko kysymyksiä, joita pidetään tiedonhankinnan peruskysymyksinä ja ne muodostavat kaavan, jonka avulla saadaan "täydellinen" tarina jostakin ai

Väripalettityökalut

Tässä postauksessa on koottuna erilaisia verkossa toimivia väripalettityökaluja ominaisuuksineen. Material.io: Color tool UI-design värien valintatyökalu, jossa mukana saavutettavuusnäkymä. Valittavis

bottom of page