2014–nykyhetki

Web-brutalismi

Ei kiillotusta. Ei teeskentelyä. Webin raaka materiaali paljaana.

Periaatteet

Raaka rehellisyys

Material Design kiillottaa jokaisen pinnan. Swiss International tekee suunnittelijasta näkymättömän. Web-brutalismi tekee mediasta näkyvän. HTML:ää ei piiloteta designin taakse — se on design.

Tämä ei ole laiskuutta. Se on filosofinen kanta: webillä on omat natiivit materiaalinsa (teksti, linkit, reunat, järjestelmäfontit) ja ne ovat riittäviä. Kiillotuksen lisääminen on epärehellisyyden lisäämistä.

Järjestelmäfontit

Ei Google Fontteja. Ei mukautettuja kirjasimia. Selaimen oletusfontit — Times New Roman, Courier, Georgia, Arial. Nämä eivät ole rumia. Ne ovat rehellisiä. Ne latautuvat välittömästi. Ne toimivat kaikkialla. Ne eivät anna lupauksia joita eivät voi pitää.

Jokainen mukautettu fontti on valhe: 'Olen erityinen. Olen erilainen. Olen odottamisen arvoinen.' Järjestelmäfontit sanovat: 'Olen tässä. Toimin. Se riittää.'

Ei siirtymiä

Hover-efektit, häivytykset, sulava vieritys — kaikki ovat kosmeettisia. Ne piilottavat totuuden: että klikkaus on välitön, että sivun lataus on korvaus, että web on dokumenttien sarja, ei sovellus.

`transition-speed: 0s` tällä sivulla ei ole bugi. Se on radikaalein suunnittelupäätös tällä sivustolla. Mikään ei animoidu. Kaikki on välitöntä. Web on nopea — design tekee siitä hitaan.

Koko leveys

Ei `max-widthiä`. Ei keskitettyä palstaa. Sisältö täyttää näkymän koska näkymä on kangas. Kapea palsta keskellä leveää ruutua on painometafora. Web ei ole painotuote.

Miksi tämä tyyli on olemassa

Termi 'web-brutalismi' nousi noin 2014 — lainattuna arkkitehtonisesta brutalismista (béton brut = raaka betoni). Yhteys: molemmat paljastavat rakennemateriaalinsa sen sijaan että peittäisivät ne pinnoitteella.

Se oli reaktio verkkosuunnittelun yhdenmukaistumiseen. Vuoteen 2014 mennessä jokainen verkkosivu näytti samalta: herokuva, keskitetty teksti, hampurilaisvalikko, sulava vieritys. Web-brutalismi kysyi: entä jos kieltäytyisimme? Entä jos web näyttäisi webiltä?

Where it appeared

  • Craigslist — vahingossa syntynyt brutalistinen mestariteos. Ei designia. Pelkkä funktio. Miljardeja käyttäjiä.
  • Bloomberg Businessweek (2018 uudistus) — yritysbrutalismi. Todistaen että 'ruma' voi olla premium
  • brutalistwebsites.com — galleria joka nimesi ja luetteloi liikkeen
  • Kehittäjien henkilökohtaiset sivut — pelkkää HTML:ää, ei CSS-kehyksiä, maksimaalinen sisältö

Legacy

Web-brutalismi todisti ettei design ole aina parannus. Joskus raaka materiaali on parempi kuin valmis tuote. Joskus Times New Roman on parempi kuin mukautettu fontti. Joskus sininen alleviivattu linkki on parempi kuin tyylitelty painike.

Sen vaikutus jatkuu 'anti-design'-liikkeessä, kehittäjien henkilökohtaisilla sivuilla, kasvavassa designjärjestelmien hylkäämisessä yritysmäisenä yhdenmukaistamisena.

Typografia

Web-brutalismi käyttää vain järjestelmäfontteja. Ei ulkoisia pyyntöjä. Ei latausviiveitä. Ei FOUTia. Fontit jotka tulevat jokaisen käyttöjärjestelmän mukana — koska ne ovat webin natiivimateriaalia.

Monospace-otsikoiden ja antiikvaleivän yhdistelmä on tarkoituksellisen kalskahtava. Se sanoo: nämä ovat eri asioita. Otsikko ei ole suurempi kappale. Se on nimike.

  • Monospace otsikoille — Courier New. Kirjoituskonefontti. Mekaaninen, rehellinen, suunnittelematon.
  • Antiikva leivälle — Times New Roman. Oletus. Fontti jonka saat kun et valitse mitään. Se on pointti.
  • Ei webfontteja — nolla ulkoista pyyntöä. Sivu latautuu millisekunneissa. Suorituskyky on suunnitteluarvo.
  • Suuri leipäteksti — 1.1rem tai suurempi. Jos fontti on 'ruma', tee siitä tarpeeksi suuri ollakseen haastava.

Väri

Web-brutalismi käyttää webin oletusvärejä. Mustaa tekstiä. Valkoinen tausta. Siniset linkit. Se on paletti. Sitä ei valita — se peritään. Nämä ovat värit jotka saat kun kirjoitat HTML:ää ilman CSS:ää.

Mikä tahansa lisäväri on kannanotto. Käytä sitä säästeliäästi — tai älä lainkaan.

  • Musta valkoisella — selaimen oletus. Maksimikontrasti. Maksimiluettavuus. Nolla päätöstä.
  • Sininen linkeille — #0000FF. Alkuperäinen hyperlinkkiväri. Ei tyylitelty, ei 'brändätty'. Linkki näyttää linkiltä.
  • Ei harmaata — harmaa on kompromissi. Brutalismi ei tee kompromisseja. Teksti on mustaa tai sitä ei ole olemassa.
  • Väri poikkeuksena — jos väriä ilmestyy, se tarkoittaa jotain kiireellistä. Punainen varoitus. Korostettu valinta. Ei koskaan koristeellista.

Muodot

Web-brutalismilla on yksi muoto: suorakulmio. Ei border-radiusta. Ei pyöristettyjä kulmia. Ei pehmeitä reunoja. Suorakulmio on HTML:n natiivimuoto — jokainen elementti on laatikko. Brutalismi ei naamioi tätä.

Reunat ovat paksuja (2px) ja mustia. Ne eivät vihjaa tai implikoi — ne julistavat. Reuna sanoo: tämä on raja. Tässä yksi asia loppuu ja toinen alkaa.

  • Nollapyöristys — aina. Pyöristetty kulma on kosmeettinen päätös. Brutalismi ei tee kosmeettisia päätöksiä.
  • Paksut mustat reunat — 2px kiinteää mustaa. Näkyvä, rakenteellinen, rehellinen. Ei koristeellinen — arkkitehtoninen.
  • Ei varjoja — varjot implikoivat syvyyttä. Web on litteä. Dokumentit ovat litteitä. Muun teeskentely on valhe.
  • Ei koristetta — tietysti. Koriste on ensimmäinen asia jonka brutalismi poistaa.

Kontrasti

Brutalistinen kontrasti on absoluuttista. Musta ja valkoinen. Päällä ja pois. Ei ole liukuvärejä, ei välimaastoa, ei hienovaraisuutta. Tämä ei ole suunnitteluvalinta — se on kieltäytyminen suunnittelusta.

Musta ja valkoinen

Ei lähes-musta (#212121) ja luonnonvalkoinen (#fafafa) kuten Material Designissa. Puhdas #000000 ja puhdas #FFFFFF. Korkein mahdollinen kontrasti. Selaimen oletus. Ei-päätös.

Monospace ja antiikva

Kaksi täysin eri kirjasinperhettä käytettynä yhdessä — ei harmonian vaan erottelun vuoksi. Törmäys on pointti. Otsikot ja leipä ovat eri asioita. Niiden tulisi näyttää erilaisilta.

Sisältö ja ei mitään

On sisältö, ja on sisällön poissaolo. Ei koriste-elementtejä, ei tunnelmaefektejä, ei visuaalista 'kiinnostavuutta'. Kontrasti on jonkin (teksti, reunat) ja ei minkään (tyhjä tila) välillä. Binääristä.

Rytmi

Brutalistinen rytmi on dokumenttivirtaa. HTML-elementit pinoutuvat pystysuoraan. Kappaleet seuraavat kappaleita. Otsikot edeltävät osioita. Tämä ei ole suunniteltua rytmiä — se on oletusrytmiä. Selaimen asettelumoottori on suunnittelija.

Dokumenttipino

Elementit ilmestyvät lähdejärjestyksessä. Ei CSS Grid -temppuja, ei flexbox-uudelleenjärjestelyä. Mikä tulee ensin HTML:ssä tulee ensin ruudulla. Rakenne on design.

Kova viiva

2px musta viiva osioiden välillä. Ei liukuväri, ei häivytys, ei koriste. Viiva. Yksinkertaisin mahdollinen erotin. `

`-elementti tehtynä näkyväksi.

Ei animaatiota

Siirtymät kestävät 0ms. Mikään ei häivyty, liu'u tai pomppaa. Tilanmuutokset ovat välittömiä. Tämä luo staccato-rytmin — klikkaa, muutu, klikkaa, muutu. Webin natiivitempo.

Hierarkia

Brutalistinen hierarkia on HTML:n natiivihierarkiaa. `

` on suurempi kuin `

` on suurempi kuin `

`. Kappaleet ovat leipäkokoa. Linkit ovat sinisiä ja alleviivattuja. Selaimen oletustyylitiedosto on designjärjestelmä.

HTML-otsikkotasot

h1, h2, h3 — jokainen edellistä pienempi. Selain päättää koot. Suunnittelija ei ohita niitä (juurikaan). Tämä on webin sisäänrakennettu hierarkia, ja se toimii.

Lihava ja kursiivi

`` ja `` — ainoa rivinsisäinen korostus. Ei värikorostuksia, ei taustamerkintöjä, ei mukautettuja alleviivauksia. HTML-elementit jotka ovat tarkoittaneet 'tärkeä' ja 'korostus' vuodesta 1993.

Sininen linkki

Sininen, alleviivattu. Tunnistettavin hierarkiasignaali webissä. Se tarkoittaa: tämä teksti johtaa jonnekin. Ei tyyliteltyjä painikkeita, ei 'toimintakehotus'-designia. Linkki on linkki.

Tila

Brutalistinen tila on minimaalista ja toiminnallista. 1rem marginaalit. 1rem täyte. Selaimen oletusvälistys, tuskin säädettynä. Tila ei ole tässä suunnittelumateriaali — se on yksinkertaisesti elementtien välinen aukko.

Koko leveyden asettelu tarkoittaa ettei tilaa hukata sivuilla. Sisältö täyttää näkymän. Leveällä ruudulla rivit ovat pitkiä. Se on hyväksyttävää — lukija voi muuttaa ikkunansa kokoa. Käyttäjä hallitsee asettelua, ei suunnittelija.

Valo

Valoa ei ole. Ei varjoa, ei vinjettiä, ei liukuväriä, ei tunnelmaa. Sivu on dokumentti — litteä, tasainen, valaisematon. Dokumenteilla ei ole valaistusta. Niillä on muste ja paperi.

Tämä on äärimmäisin asema tällä sivustolla. Jopa Bauhaus ja Swiss International myöntävät että sivu on olemassa tilassa. Brutalismi kieltää tämän. Sivu ei ole pinta — se on tiedosto.

Tunnusomaiset piirteet

Web-brutalismi tunnistetaan sen kieltäytymisistä — asioista joita se ei tee.

Ei siirtymiä (0ms)

Radikaalein CSS-määritys tällä sivustolla: `transition-speed: 0s`. Mikään ei animoidu. Hover-tilat ilmestyvät välittömästi. Modaalit ilmestyvät välittömästi. Web on tilojen sarja, ei jatkuva kokemus. Brutalismi tekee tämän eksplisiittiseksi.

Koko näkymän leveys

`max-width: 100%`. Ei keskitettyä palstaa. Sisältö täyttää minkä tahansa tilan jonka selain tarjoaa. Tämä on webin natiivikäyttäytyminen — jokainen muu tämän sivuston tyyli rajoittaa sitä. Brutalismi ei.

Vain järjestelmäfontit

Nolla ulkoista fonttipyyntöä. Sivu latautuu millisekunneissa koska se ei pyydä mitään. Suorituskykyä ei optimoida — se on luontaista. Nopein verkkosivu on se joka ei tee pyyntöjä.

Anti-design-asema

Jokainen muu tämän sivuston tyyli lisää jotain selaimen oletuksiin. Brutalismi poistaa. Se riisuu pois CSS:n jonka muut tyylit lisäävät. Jäljelle jää itse web — HTML renderöitynä selaimessa, kuten Tim Berners-Lee tarkoitti.

Miten tämä tyyli rikkoutuu

Brutalismi rikkoutuu kun siitä tulee estetiikka eikä filosofia — kun 'rumasta' tulee tyylivalinta eikä rehellisyyden seuraus.

Suunniteltu rumuus

Asioiden tarkoituksellinen rumentaminen ei ole brutalismia — se on Memphisiä (tarkoituksellinen vääryys leikkinä). Brutalismi ei ole rumaa tarkoituksella. Se on rumaa kosmeettisten päätösten tekemisestä kieltäytymisen sivuvaikutuksena. Rumuus ei ole tavoite. Rehellisyys on.

Mukautetut 'brutalistiset' fontit

Mukautetun monospace-fontin lataaminen 'näyttääkseen brutalistiselta' kumoaa koko pointin. Järjestelmäfontti on brutalistinen koska se on jo siellä. Sillä hetkellä kun teet pyynnön fonttitiedostosta, olet tehnyt suunnittelupäätöksen. Brutalismi kieltäytyy suunnittelupäätöksistä.

Brutalismi brändinä

Luksusbrändi joka käyttää brutalistista estetiikkaa 'särmikkyyteen'. Teknologiastartup joka käyttää raakaa HTML:ää näyttääkseen 'aidolta'. Sillä hetkellä kun brutalismi palvelee markkinointitarkoitusta, siitä tulee vastakohtansa — kiillotettu pinta joka teeskentelee olevansa raaka.

Saavuttamaton raakuus

Brutalismi on rehellistä, ei vihamielistä. Tekstin on yhä oltava luettavaa. Linkkien on yhä oltava tunnistettavia. Rakenteen on yhä oltava navigoitava. Selaimen oletukset ovat saavutettavia — brutalismi joka rikkoo saavutettavuuden on mennyt liian pitkälle.