Brutalistisches Design: rohe Layouts und wie du sie nutzt

Brutalistisches Design ist ein Stil, der seine Struktur zeigt, statt sie zu verbergen: sichtbare Raster, Standard- oder Monospace-Schrift, harte schwarze Rahmen, flache Farbe und fast kein Zierrat. Der Name stammt von der brutalistischen Architektur, meist zurückgeführt auf das französische béton brut, rohen Beton. Auf einer Website oder einem Plakat wirkt Brutalismus bewusst unpoliert, was in einer Welt aus runden Karten und weichen Verläufen auffällt. Mit Sorgfalt eingesetzt, bleibt er trotzdem gut lesbar und navigierbar.

Woher der Brutalismus kommt: eine kurze Geschichte

Die Idee entstand in der Architektur nach dem Zweiten Weltkrieg. Architekten ließen Beton roh, zeigten, wie ein Gebäude gemacht war, und stellten Funktion über Finish. Grafik- und Webdesigner übernahmen die Haltung Jahrzehnte später, nicht den Beton.

Wie brutalistisches Grafik- und Webdesign aussieht

• Standard- oder Systemschrift: Times, Arial, Courier und Monospace-Schriften, oft in einer Größe, wobei der Schriftschnitt die Hierarchie übernimmt.
• Sichtbare Struktur: Rahmen um jeden Block, gezeigte Rasterlinien, Tabellen, die wie Tabellen aussehen.
• Harte Kanten: keine runden Ecken, keine weichen Schatten, keine Unschärfe.
• Flache Farbe: Weiß, Schwarz, Grau und eine oder zwei laute Signalfarben.
• Rohe Links: blaue unterstrichene Links, schlichte Buttons mit Rahmen.
• Dichte oder ungleichmäßige Layouts: Inhalt Kante an Kante gestapelt oder ein riesiges Element, das das Raster sprengt.

An der Schrift zeigt sich Brutalismus am deutlichsten. Eine Monospace-Schrift sagt „von Hand gemacht, im Code“; eine schlichte Serifenschrift in Standardgröße sagt „um Schriften haben wir uns nicht gekümmert“, und genau das ist der Punkt. Monospace-Schriften nennt gute Optionen, wenn du den Look willst, ohne dich auf das System des Lesers zu verlassen.

Brutalismus und Neubrutalismus im Vergleich

Das meiste, was heute auf Produktwebsites brutalistisch genannt wird, ist Neubrutalismus, manchmal Neo-Brutalismus geschrieben. Er behält die harten Konturen und die flache Farbe, ergänzt aber Freundlichkeit: pastellige oder bonbonfarbene Leuchtfarben, kräftige Schrift und einen festen versetzten Schatten, der Karten aussehen lässt, als säßen sie auf der Seite.

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

So nutzt du brutalistisches Design, ohne die Bedienbarkeit zu verletzen

Brutalismus darf roh aussehen. Er darf nicht verwirrend sein. Die stärksten brutalistischen Seiten sind unverblümt darin, wo was ist: große schlichte Navigation, offensichtliche Links, ehrliche Überschriften. Gewollte Hässlichkeit ist ein Stil; unlesbarer Text ist einfach ein Fehler.

1. 1

   Eine Regel zum Brechen wählen

   Vielleicht ist es Standardschrift, vielleicht eine kollidierende Farbe, vielleicht ein ungleichmäßiges Raster. Alle Konventionen auf einmal zu brechen wirkt kaputt, nicht brutal.

2. 2

   Den Kontrast hoch halten

   Schwarz auf Weiß oder Weiß auf Schwarz ist sehr brutalistisch und sehr lesbar. Grau auf Grau ist keines von beidem. Prüfe Text mit Blick auf Farbkontrast und Barrierefreiheit.

3. 3

   Links unverwechselbar machen

   Unterstreichungen und eine eigene Farbe. Brutalismus ist ein Stil, in dem die alten Browser-Standards ein Gewinn sind.

4. 4

   Struktur als Dekoration nutzen

   Rahmen, Linien, nummerierte Abschnitte und sichtbare Raster geben der Seite ihren Look, du brauchst also keine Bilder, damit sie gestaltet wirkt.

5. 5

   Ein Element riesig sein lassen

   Eine riesige Überschrift oder Zahl, die das Raster sprengt, gibt einem brutalistischen Layout seine Spannung. Siehe Kühnes Grafikdesign für Größe.

Wem brutalistisches Design steht

Brutalismus sagt Menschen, dass dir der Inhalt wichtiger ist als die Verpackung. Das passt zu unabhängigen Verlagen, Plattenlabels, Galerien, Architekturbüros, Entwickler-Tools und Portfolios von Designern. Zu einem Spa, einem Juwelier oder einer Kindermarke passt es deutlich weniger, denn diese Kunden kaufen Beruhigung und Ruhe. Wenn dir die Klarheit gefällt, aber nicht die Rohheit, teilt der Schweizer Stil die Liebe des Brutalismus zum Raster mit weit mehr Politur.

Du kannst Brutalismus auch teilweise entlehnen. Ein rohes Monospace-Schriftsystem über einem reichen Hintergrund zum Beispiel behält die Ehrlichkeit und fügt Atmosphäre hinzu. Ein Gradiently Mark passt gut hinter solche schlichte Schrift, weil er eine ruhige Fläche unter den Worten hält und pro Zeile helle oder dunkle Tinte wählt. Kombiniere ihn mit den Layouts aus Landingpage-Design für eine Seite, die roh und fertig zugleich wirkt.