2014–idag

Web Brutalism

Ingen polish. Ingen pretention. Webbens råmaterial, blottat.

Principer

Rå ärlighet

Material Design polerar varje yta. Swiss International gör designern osynlig. Web Brutalism gör mediet synligt. HTML döljs inte bakom design — det är designen.

Det här är inte lättja. Det är en filosofisk ståndpunkt: webben har sina egna inbyggda material (text, länkar, ramar och systemtypsnitt) och de är tillräckliga. Att tillföra polish är att tillföra oärlighet.

Systemtypsnitt

Inga Google Fonts. Inga anpassade typsnitt. Webbläsarens standardtypsnitt — Times New Roman, Courier, Georgia och Arial. De är inte fula. De är ärliga. De laddas omedelbart. De fungerar överallt. De lovar inget de inte kan hålla.

Varje anpassat typsnitt är en lögn: 'Jag är speciell. Jag är annorlunda. Jag är värd att vänta på.' Systemtypsnitt säger: 'Jag är här. Jag fungerar. Det räcker.'

Inga övergångar

Hover-effekter, infadningar och mjuk scrollning — allt är kosmetiskt. De döljer sanningen: att ett klick är omedelbart, att en sidladdning är ett byte, att webben är en serie dokument, inte en app.

`transition-speed: 0s` på den här sidan är inte en bugg. Det är det mest radikala designbeslutet på denna sajt. Inget animeras. Allt är omedelbart. Webben är snabb — design gör den långsam.

Full bredd

Ingen `max-width`. Ingen centrerad kolumn. Innehållet fyller viewporten, eftersom viewporten är duken. En smal kolumn mitt på en bred skärm är en tryckmetafor. Webben är inte tryck.

Varför denna stil finns

Termen 'web brutalism' dök upp runt 2014 — lånad från arkitektonisk brutalism (béton brut = rå betong). Kopplingen: båda blottar sina strukturella material istället för att täcka dem med finish.

Det var en reaktion mot webbdesignens homogenisering. År 2014 såg varje webbplats likadan ut: hjältebild, centrerad text, hamburgarmeny och mjuk scroll. Web Brutalism frågade: tänk om vi vägrade? Tänk om webben såg ut som webben?

Where it appeared

  • Craigslist — det oavsiktliga brutalistiska mästerverket. Ingen design. Ren funktion. Miljarder användare.
  • Bloomberg Businessweek (2018 redesign) — företagsbrutalism. Beviset för att 'fult' kan vara premium
  • brutalistwebsites.com — galleriet som namngav och katalogiserade rörelsen
  • Utvecklares personliga webbplatser — ren HTML, inga CSS-ramverk, maximalt innehåll

Legacy

Web Brutalism bevisade att design inte alltid är en förbättring. Ibland är råmaterialet bättre än den färdiga produkten. Ibland är Times New Roman bättre än ett anpassat typsnitt. Ibland är en blå understruken länk bättre än en stiliserad knapp.

Dess inflytande lever vidare i 'anti-design'-rörelsen, i utvecklares personliga sajter och i det växande förkastandet av designsystem som företagshomogenisering.

Typografi

Web Brutalism använder enbart systemtypsnitt. Inga externa anrop. Inga laddningstider. Ingen FOUT. Typsnitten som levereras med varje operativsystem — eftersom de är webbens inbyggda material.

Kombinationen av monospace-rubriker och serifbrödtext är avsiktligt skärande. Den säger: det här är olika saker. En rubrik är inte ett större stycke. Den är en etikett.

  • Monospace för rubriker — Courier New. Skrivmaskinstypsnittet. Mekaniskt, ärligt och odesignat.
  • Serif för brödtext — Times New Roman. Standardvalet. Typsnittet du får när du inte väljer något. Det är poängen.
  • Inga webbtypsnitt — noll externa anrop. Sidan laddar på millisekunder. Prestanda är ett designvärde.
  • Stor brödtext — 1.1rem eller större. Om typsnittet är 'fult,' gör det stort nog att vara konfronterande.

Färg

Web Brutalism använder webbens standardfärger. Svart text. Vit bakgrund. Blå länkar. Det är paletten. Den är inte vald — den är ärvd. Det här är färgerna du får när du skriver HTML utan CSS.

Varje ytterligare färg är ett ställningstagande. Använd den sparsamt — eller inte alls.

  • Svart på vitt — webbläsarens standard. Maximal kontrast. Maximal läsbarhet. Noll beslut.
  • Blått för länkar — #0000FF. Den ursprungliga hyperlänkfärgen. Inte stiliserad, inte 'varumärkesanpassad.' En länk ser ut som en länk.
  • Inget grått — grått är en kompromiss. Brutalism kompromissar inte. Text är svart eller så existerar den inte.
  • Färg som undantag — om färg dyker upp, betyder den något brådskande. En röd varning. En markerad markering. Aldrig dekorativ.

Former

Web Brutalism har en form: rektangeln. Ingen border-radius. Inga rundade hörn. Inga mjuka kanter. Rektangeln är HTML:s inbyggda form — varje element är en box. Brutalism förkläder inte detta.

Ramar är tjocka (2px) och svarta. De antyder inte och implicerar inte — de deklarerar. En ram säger: här är kanten. Här slutar en sak och en annan börjar.

  • Noll radie — alltid. Ett rundat hörn är ett kosmetiskt beslut. Brutalism fattar inga kosmetiska beslut.
  • Tjocka svarta ramar — 2px solid svart. Synliga, strukturella och ärliga. Inte dekorativa — arkitektoniska.
  • Inga skuggor — skuggor antyder djup. Webben är platt. Dokument är platta. Att låtsas annorlunda är en lögn.
  • Inget ornament — uppenbarligen. Ornament är det första brutalism tar bort.

Kontrast

Brutalistisk kontrast är absolut. Svart och vitt. På och av. Det finns ingen gradient, inget mellanläge, ingen subtilitet. Det här är inte ett designval — det är en vägran att designa.

Svart och vitt

Inte nästan-svart (#212121) och benvitt (#fafafa) som Material Design. Rent #000000 och rent #FFFFFF. Maximal möjlig kontrast. Webbläsarens standard. Icke-beslutet.

Monospace och serif

Två helt olika typsnittsfamiljer använda tillsammans — inte för harmoni utan för distinktion. Krocken är poängen. Rubriker och brödtext är olika saker. De bör se olika ut.

Innehåll och ingenting

Det finns innehåll, och det finns frånvaron av innehåll. Inga dekorativa element, inga atmosfäriska effekter, inget visuellt 'intresse.' Kontrasten är mellan något (text, ramar) och ingenting (vitt utrymme). Binärt.

Rytm

Brutalistisk rytm är dokumentflödet. HTML-element staplas vertikalt. Stycken följer stycken. Rubriker föregår sektioner. Det här är inte designad rytm — det är standardrytm. Webbläsarens layoutmotor är designern.

Dokumentstapeln

Element dyker upp i källkodsordning. Inga CSS Grid-trick, ingen flexbox-omordning. Det som kommer först i HTML:en kommer först på skärmen. Strukturen är designen.

Den hårda linjen

En 2px svart linje mellan sektioner. Inte en gradient, inte en infadning, inte ett ornament. En linje. Den enklast möjliga separatorn. `

`-elementet gjort synligt.

Ingen animation

Övergångar tar 0ms. Inget fadear, glider eller studsar. Tillståndsändringar är omedelbara. Det här skapar en staccatorytm — klick, ändring, klick, ändring. Webbens inbyggda tempo.

Hierarki

Brutalistisk hierarki är HTML:s inbyggda hierarki. `

` är större än `

` är större än `

`. Stycken är i brödstorlek. Länkar är blå och understrukna. Webbläsarens standardstilmall är designsystemet.

HTML-rubriknivåer

h1, h2, h3 — var och en mindre än den föregående. Webbläsaren bestämmer storlekarna. Designern åsidosätter dem inte (nämnvärt). Det här är webbens inbyggda hierarki, och den fungerar.

Fet och kursiv

`` och `` — den enda inline-betoningen. Inga färgmarkeringar, inga bakgrundsmarkeringar, inga anpassade understrykningar. HTML-elementen som har betytt 'viktigt' och 'betoning' sedan 1993.

Den blå länken

Blå, understruken. Den mest igenkännbara hierarkisignalen på webben. Den betyder: den här texten leder någonstans. Inga stiliserade knappar, ingen 'call to action'-design. En länk är en länk.

Rymd

Brutalistisk rymd är minimal och funktionell. 1rem marginaler. 1rem utfyllnad. Webbläsarens standardavstånd, knappt justerat. Rymd är inte ett designmaterial här — det är helt enkelt gapet mellan element.

Fullbreddslayout innebär inget slösat utrymme på sidorna. Innehållet fyller viewporten. På en bred skärm är raderna långa. Det är acceptabelt — läsaren kan ändra storlek på sitt fönster. Användaren styr layouten, inte designern.

Ljus

Det finns inget ljus. Ingen skugga, ingen vinjett, ingen gradient, ingen atmosfär. Sidan är ett dokument — platt, jämnt och obelyst. Dokument har inte belysning. De har bläck och papper.

Det här är den mest extrema positionen på denna sajt. Även Bauhaus och Swiss International erkänner att en sida existerar i ett rum. Brutalism förnekar detta. Sidan är inte en yta — den är en fil.

Signaturegenskaper

Web Brutalism identifieras av sina vägranden — de saker den inte gör.

Inga övergångar (0ms)

Den mest radikala CSS-deklarationen på denna sajt: `transition-speed: 0s`. Inget animeras. Hover-tillstånd dyker upp omedelbart. Dialoger dyker upp omedelbart. Webben är en serie tillstånd, inte en kontinuerlig upplevelse. Brutalism gör detta explicit.

Full viewportbredd

`max-width: 100%`. Ingen centrerad kolumn. Innehållet fyller det utrymme webbläsaren tillhandahåller. Det här är webbens inbyggda beteende — varje annan stil på denna sajt begränsar det. Brutalism gör det inte.

Enbart systemtypsnitt

Noll externa typsnittsanrop. Sidan laddar på millisekunder, eftersom den inte ber om något. Prestanda är inte optimerad — den är inneboende. Den snabbaste webbplatsen är den som inte gör några anrop.

Anti-design-positionen

Varje annan stil på denna sajt tillför något till webbläsarens standarder. Brutalism tar bort. Den rensar bort den CSS som andra stilar tillför. Kvar blir webben i sig — HTML renderad av en webbläsare, som Tim Berners-Lee avsåg.

Hur denna stil går sönder

Brutalism går sönder när det blir en estetik snarare än en filosofi — när 'fult' blir ett stilval snarare än en konsekvens av ärlighet.

Designad fulhet

Att medvetet göra saker fula är inte brutalism — det är Memphis (medveten felaktighet som lek). Brutalism är inte fult med avsikt. Det är fult som bieffekt av att vägra fatta kosmetiska beslut. Fulheten är inte målet. Ärligheten är det.

Anpassade 'brutalistiska' typsnitt

Att ladda ett anpassat monospace-typsnitt för att 'se brutalistiskt ut' motverkar hela poängen. Systemtypsnittet är brutalistiskt, eftersom det redan finns där. I det ögonblick du gör en förfrågan efter en typsnittsfil, har du fattat ett designbeslut. Brutalism vägrar fatta designbeslut.

Brutalism som varumärke

Ett lyxvarumärke som använder brutalistisk estetik för 'kantighet.' En techstartup som använder rå HTML för att verka 'autentisk.' I det ögonblick brutalism tjänar ett marknadsföringssyfte, blir det sin egen motsats — en polerad yta som låtsas vara rå.

Otillgänglig råhet

Brutalism är ärligt, inte fientligt. Text måste fortfarande vara läsbar. Länkar måste fortfarande vara identifierbara. Struktur måste fortfarande vara navigerbar. Webbläsarens standarder är tillgängliga — brutalism som bryter tillgänglighet har gått för långt.