Brutalistisches Webdesign: Beispiele zum Bearbeiten
Beispiele für brutalistisches Webdesign
Brutalistisches Webdesign: Live-Beispiele und CSS zum Kopieren | We.Inc
Brutalistisches und neo-brutalistisches Webdesign erklärt, mit vier eigenen Live-Beispielen, einem Button-Generator für harte Schatten und dicke Rahmen und dem CSS zum Kopieren.
Brutalistisches Webdesign reduziert eine Seite auf ihre rohe Struktur: Standard- oder Systemschriften, sichtbare Rahmen, schlichte Links und kaum Dekoration. Neo-Brutalismus, sein freundlicherer Verwandter, behält die dicken schwarzen Konturen, ergänzt aber flache, kräftige Farben und harte, versetzte Schatten. Beides sind vor allem CSS-Entscheidungen, daher sind die Beispiele unten bearbeitbar und jede Regel lässt sich kopieren.
Brutalistisch und neo-brutalistisch im Vergleich
Merkmal
Brutalistisch
Neo-brutalistisch
Schrift
System oder Monospace, oft Standardgrößen
Fette Grotesk oder System-Sans, groß
Farbe
Schwarz, Weiß, vielleicht ein Linkblau
Flache, gesättigte Flächen: Gelb, Pink, Mint
Rahmen
1px-Linien, Tabellen, sichtbare Kästen
2 bis 4px dicke, durchgehend schwarze Konturen
Schatten
Keine
Hart versetzt, ohne Weichzeichnung
Wirkung
Roh, wie ein Dokument
Verspielt, wie ein Sticker
Galerien brutalistischer Websites zeigen Screenshots, die du nicht untersuchen kannst. Jedes Beispiel hier ist ein eigenes Design in reinem HTML und CSS, live gerendert, direkt bearbeitbar und frei kopierbar, dazu ein Generator für den neo-brutalistischen Button, nach dem die meisten suchen.
Stelle den Button-Generator ein: Rahmenstärke, Schattenversatz, Füllfarbe und Eckenradius.
Fahre mit der Maus über die Vorschau, um den Druckeffekt zu spüren, und kopiere dann das CSS.
Scrolle zu den vier Beispielen und bearbeite ihren Code, um zu sehen, wie sich das Ergebnis ändert.
Behalte die Hinweise zur Barrierefreiheit im Blick, bevor du eine laute Farbpalette veröffentlichst.
Harte Schatten brauchen keinen Weichzeichnungswert: Setze die dritte Länge von box-shadow auf 0 für einen scharf versetzten Block.
Schwarzer Text auf gesättigtem Gelb, Mint oder Pink ist meist gut lesbar; weißer Text auf diesen Flächen meist nicht. Prüfe jedes Paar.
Roh heißt nicht nachlässig. Halte eine einheitliche Abstandsstufe ein, auch wenn Rahmen und Schrift grob wirken.
Lass Fokuskonturen sichtbar und dick, das passt auch zum Stil.
Nutze den Look für Portfolios, Zines, Events und Tools für Designer; teste ihn mit deiner Zielgruppe, bevor du ihn auf der Website einer Bank oder Praxis einsetzt.
Häufige Fragen
Was ist brutalistisches Webdesign?
Ein Stil, der das Gerüst einer Webseite zeigt, statt es zu polieren: Standardschriften, harte Kanten, sichtbare Raster oder Tabellen, unterstrichene Links und wenige Bilder. Ziel sind Ehrlichkeit und Geschwindigkeit statt Schönheit.
Was ist Neo-Brutalismus?
Neo-Brutalismus übernimmt die schweren Konturen und das unverblümte Layout des Brutalismus und kombiniert sie mit flachen, kräftigen Farben, wuchtiger Schrift und massiven, versetzten Schatten. Er ist verbreitet auf Produkt-Landingpages und App-Oberflächen, die kühn und locker wirken wollen.
Wie erstelle ich einen neo-brutalistischen Schatten in CSS?
Verwende box-shadow mit einem x- und y-Versatz, ohne Weichzeichnung und mit einer Vollfarbe, zum Beispiel box-shadow: 6px 6px 0 #000. Kombiniere das mit border: 3px solid #000. Verschiebe das Element beim Hover in Richtung Schatten und verkleinere den Versatz, damit es sich gedrückt anfühlt.
Ist brutalistisches Design schlecht für die Barrierefreiheit?
Nicht von Natur aus. Schlichtes HTML, echte Links und kräftige Konturen sind oft sehr barrierefrei. Probleme entstehen durch Farbpaare mit geringem Kontrast, winzigen Standardtext und entfernte Fokusstile. Prüfe diese also wie auf jeder anderen Website.
Wo der Stil funktioniert
Brutalismus passt zu Websites, die Persönlichkeit oder eine Do-it-yourself-Haltung zeigen wollen: persönliche Seiten, Studios, Publikationen, Musik- und Event-Websites. Durch seine Schlichtheit sind die Seiten zudem leicht, weil es kaum Bilder und wenige Webschriften zu laden gibt.
Schwieriger passt er dort, wo Besucher Vertrauen brauchen, etwa im Gesundheitswesen, bei Finanzen oder im Checkout. Dort kann ein ruhigeres Layout mit einem einzelnen brutalistischen Akzent, etwa einem umrandeten Call to Action, der bessere Kompromiss sein.
Den Stil zu deinem eigenen machen, ohne zu kopieren
Die meisten brutalistischen Seiten teilen eher ein Vokabular als eine Vorlage, daher musst du dir selten etwas von jemandem leihen. Entscheide dich für ein strukturelles Motiv, etwa ein sichtbares Raster, nummerierte Abschnitte oder einen Laufticker, und wiederhole es konsequent.
Wähle eine Palette aus Schwarz, Weiß und höchstens zwei flachen Akzentfarben. Lass dann Abstände, Rahmen und Schriftgröße die übrige Arbeit machen, statt Verläufen, Fotos oder weichen Schatten.
Vier eigene Beispiele
Startseite im rohen Dokumentstil
System-Monospace, standardmäßig blaue Links und eine schlichte Tabelle. Der ganze Look besteht aus einer Handvoll Regeln.
Neo-brutalistische Preiskarte
Dicke Kontur, flache Füllung und ein harter Schatten auf Karte und Schaltfläche.
Galerie mit sichtbarem Raster
Die Rahmen dienen zugleich als Rasterlinien, die Struktur ist also die Dekoration.
Brutalistisches Newsletter-Formular
Ein beschriftetes Feld und eine Schaltfläche mit schweren Konturen und einem dicken Fokusrahmen, der zum Stil passt.
Generator für neo-brutalistische Buttons
Passe Rahmen, Schattenversatz, Füllung und Radius an. Die Startwerte erzeugen dieses CSS: