Brutalistisk design: råa layouter och hur du använder dem

Brutalistisk design är en stil som visar sin struktur i stället för att dölja den: synliga rutnät, standardtypsnitt eller monospace, hårda svarta ramar, platt färg och nästan ingen ornamentik. Namnet kommer från brutalistisk arkitektur, som oftast härleds till franskans béton brut, rå betong. På en webbplats eller affisch ser brutalism medvetet obearbetad ut, vilket får den att sticka ut i en värld av rundade kort och mjuka gradienter. Används den med omsorg går den ändå utmärkt att läsa och navigera i.

Varifrån brutalismen kommer: en kort historia

Idén föddes inom arkitekturen efter andra världskriget. Arkitekter lät betongen vara bar, visade hur en byggnad var gjord och satte funktion framför ytbehandling. Grafiska designer och webbdesigner tog över attityden årtionden senare, men inte betongen.

Hur brutalistisk grafisk design och webbdesign ser ut

• Standardtypsnitt eller systemtypsnitt: Times, Arial, Courier och monospace, ofta i en enda storlek där vikten sköter hierarkin.
• Synlig struktur: ramar runt varje block, synliga rutnätslinjer, tabeller som ser ut som tabeller.
• Hårda kanter: inga rundade hörn, inga mjuka skuggor, ingen oskärpa.
• Platt färg: vitt, svart, grått och en eller två högljudda signalfärger.
• Råa länkar: blå understrukna länkar, enkla knappar med en ram.
• Täta eller ojämna layouter: innehåll staplat kant i kant, eller ett enormt element som bryter rutnätet.

Typografin är där brutalismen syns tydligast. Ett monospacetypsnitt säger ”gjort för hand, i kod”, ett enkelt serifstypsnitt i standardstorlek säger ”vi brydde oss inte om typsnitt”, vilket är poängen. Monospacetypsnitt listar bra val om du vill ha looken utan att förlita dig på vad läsarens system råkar ha.

Brutalism och neobrutalism jämförda

Det mesta som i dag kallas brutalistiskt på produktwebbplatser är neobrutalism. Den behåller de hårda konturerna och den platta färgen men lägger till vänlighet: pastell- eller godisfärger, kraftig text och en solid förskjuten skugga som får korten att se ut att sitta ovanpå sidan.

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

Så använder du brutalistisk design utan att skada användbarheten

Brutalismen får se rå ut. Den får inte vara förvirrande. De starkaste brutalistiska webbplatserna är tydliga med var saker finns: stor enkel navigering, uppenbara länkar, ärliga rubriker. Fulhet som val är en stil, oläslig text är bara en bugg.

1. 1

   Välj en regel att bryta

   Kanske är det standardtypsnitt, kanske en skärande färg, kanske ett ojämnt rutnät. Att bryta varje konvention på en gång läses som trasigt, inte brutalt.

2. 2

   Håll kontrasten hög

   Svart på vitt eller vitt på svart är mycket brutalistiskt och mycket läsbart. Grått på grått är ingetdera. Kontrollera texten med färgkontrast och tillgänglighet i åtanke.

3. 3

   Gör länkar omisskännliga

   Understrykningar och en tydlig färg. Brutalism är en stil där webbläsarnas gamla standardutseenden är en tillgång.

4. 4

   Använd strukturen som dekoration

   Ramar, linjer, numrerade avsnitt och synliga rutnät ger sidan dess look, så du behöver inga bilder för att den ska kännas designad.

5. 5

   Låt ett element vara enormt

   En jättelik rubrik eller siffra som bryter rutnätet ger en brutalistisk layout dess spänning. Se djärv grafisk design för skala.

Vem brutalistisk design passar

Brutalism talar om för folk att du bryr dig mer om innehållet än om förpackningen. Det passar oberoende förlag, skivbolag, gallerier, arkitekter, utvecklarverktyg och designers portföljer. Det passar ett spa, en juvelerare eller ett barnvarumärke mycket sämre, eftersom de kunderna köper trygghet och lugn. Om du gillar tydligheten men inte råheten delar schweizisk design brutalismens kärlek till rutnätet, med mycket mer finish.

Du kan också låna delar av brutalismen. Ett rått monospacesystem ovanpå en rik bakgrund, till exempel, behåller ärligheten och lägger till atmosfär. En Mark från Gradiently fungerar bra bakom sådan enkel text, eftersom den håller ett lugnt område under orden och väljer ljus eller mörk färg rad för rad. Kombinera den med layouterna i design av landningssida för en webbplats som känns både rå och färdig.