Der Begriff „Brutalismus“ im Bezug zur Webgestaltung lehnt sich an den Brutalism Architekturstil an. Einige Charakteristiken des Architekturstils sollten daher ebenfalls auf den Webdesign Stil adaptierbar sein. Die oben festgelegten Charakteristiken, die den brutalistischen Architekturstil beschreiben, lauten: Brutalistische Gebäude haben sich wiederholende Muster und geometrische Elemente. Sie sind ehrlich im Bezug zu den verwendeten Materialien. Sie beinhalten einen sozialen Gedanken / eine soziale Vision. Sie sind Funktional und sie vermitteln ein dramatisches Gefühl.


Auf den Web Brutalism angewandt würde das bedeuten, dass sich folgende Kriterien ergeben:


1. Eine brutalistische Webseite enthält sich wiederholende geometrische Elemente und Muster. Diese könnten aus Text, Farbe und anderen Medien, wie Bildern, GIFs oder Videos bestehen. Auch Größenverhältnisse, also z. B. verschiedene Textformatierungen und deren Anordnung können solche sich wiederholende Elemente sein. Dadurch dass eine Internetseite standardmäßig aus unsichtbaren Boxen besteht, durch die jedes Element umrahmt wird, die z. B. mit Füllfarben oder eingefügten Bildern sichtbar gemacht werden können, ergeben sich geometrische Linien, Formen und Muster quasi zwangsläufig.

2. Brutalistische Webseiten sollten zeigen, dass sie ehrlich im Bezug zu genutzten Materialien sind. Sie sollten daher ihren Ursprüngen treu bleiben und nicht besonders gestylet bzw. verschönert werden. Damit ist gemeint, dass eine brutalistische Webseite ohne Programmiersprachen wie PHP, Java, Java Script, Perl oder MySQL erstellt wird und möglichst nur aus der Standard Websprache HTML (Hypertext Markup Language) besteht. HTML beschreibt die Struktur der auf der Webseite enthaltenen Texte und Elemente und hat mit der optischen Gestaltung erst einmal nichts zu tun. Besondere Effekte, interaktive Funktionen oder Animationen (bis auf Gifs oder Videos, die ohne Skripte funktionieren) wären also nicht brutalistisch.


Exkurs zur oberflächlichen Erklärung von HTML und CSS: Das Strukturieren und ein Teil des Stylens der auf der Webseite enthaltenen Elemente geschieht durch verschiedene Standard HTML-Tags. Beispielsweise gibt es für Überschriften Tags, die zum einen beschreiben wie eine Überschrift aussehen soll und zum anderen wie wichtig eine Überschrift ist. Für Überschriften gibt es die Tags 'h1', 'h2', 'h3', 'h4', 'h5' und 'h6'. Eine 'h1' Überschrift wird am größten dargestellt und ist für Suchmaschinen am wichtigsten, wohingegen eine 'h2' Überschrift kleiner dargestellt wird, sich dadurch als Unterüberschrift eignet und weniger wichtig ist. Ein Webseiteninhalt, der mit einer 'h1' Überschrift getagt ist, wird in den Suchergebnissen eher anzeigt als eine mit 'h2' oder 'h3' Überschrift, obwohl sie textlich den gleichen Inhalt haben. Bilder werden mit dem 'img' Tag, Videos mit einem 'video' Tag eingefügt.

Neben den genannten Tags gibt es noch weitere Standard HTML-Tags für Metadaten des Dokuments, Skripte, Abschnitte (Sections), Inhalte, semantische Text-Elemente, eingebettete Inhalte, Tabellen, Formulare und mehr, die vom Browsern erkannt und Formatiert ausgegeben werden, ohne das CSS (Cascading Style Sheets) Angaben vom Webgestalter notwendig sind. Durch das Benennen der genannten Standard HTML-Tags durch IDs oder Klassen (Class) lassen sich diese Elemente per CSS ansprechen und stylen.

Durch CSS wird definiert, wie HTML-Elemente angezeigt werden sollen. Das beinhaltet das Layout, Abstände, Größen, Farben, typografische Eigenschaften und mehr. CSS gehört ebenfalls zu den Standard Websprachen und wird in Kombination mit einem HTML-Dokument verwendet. Entweder wird der CSS-Code als externes Dokument per Link eingefügt, was den Vorteil hat, dass alle HTML-Dokumente mit gleichen Tags beeinflusst werden, in der das CSS-Dokument verlinkt wird. Die zweite Möglichkeit ist, dass CSS Angaben als interner Code in einem separaten Abschnitt des HTML-Dokuments eingefügt werden, wodurch sich diese Angaben nur auf Elemente dieses HTML-Dokumentes beziehen. Eine dritte Möglichkeit ist, spezifische Elemente aus einem HTML-Dokument direkt zu stylen. Das geschieht durch Inline Styles. Ein Element muss dadurch nicht durch ein DIV oder eine Klasse benannt werden, sondern wird durch eine CSS Angabe direkt beeinflusst. Dadurch bezieht sich der hinzugefügte Befehl nicht auf andere gleichnamige Elemente des HTML-Dokuments, sondern nur auf dieses eine Element.

Wie erwähnt, werden einige HTML-Tags vom Browser erkannt. Durch den Browser werden die in den Tags eingeschlossenen Inhalte auch ohne selbst erstellte CSS formatiert. Ein Beispiel dafür ist die blaue Farbe von Links die standardmäßig genutzt wird. Ein weiteres Beispiel ist die Standard Schriftart, die immer dann genutzt wird, wenn vom Webgestalter keine andere Schriftart angegeben wurde. Bei Google Chrom ist das „Times New Roman“. Neben dieser Schriftart gibt es weitere websichere Schriften, die einem zur Verfügung stehen. Websicher bedeutet in diesem Fall, dass es einige Schriftarten gibt, von denen man ausgehen kann, dass sie auf dem Großteil der Ausgabegeräte installiert sind und immer gleich dargestellt werden. Wenn eine brutalistische Webseite ihrem Ursprung treu bleiben will, sollte sie diese Standardelemente nutzen, was nicht bedeutet, dass eine brutalistische Webseite absolut kein CSS verwenden darf. CSS sollte aber bewusst und geringfügig genutzt werden, für z. B. Abstände oder Textausrichtungen.

Dieses Charakteristikum ist also vergleichbar mit der Zurschaustellung reiner und unbehandelter Materialien brutalistischer Bauwerke, die oftmals Beton als Bau- und Stilmittel nutzten, den sie unverputzt und ohne zusätzlichen Anstrich darstellten.

3. Die soziale Vision von brutalistischen Gebäuden könnte man im Bezug zu brutalistischen Webseiten mit den Usability Normen vergleichen, vor allem im Punkt der Zugänglichkeit. Wie bereits beschrieben sollte eine Webseite für jeden Menschen zugänglich und benutzbar sein, auch für Menschen mit Behinderung. Jedoch ist es z. B. bei Webseiten, die mit vielen Bildern arbeiten nicht immer einfach sie für beispielsweise Sehbehinderte barrierefrei zu gestalten, weil diese bei einem Großteil der Webseiten nicht unter die Zielgruppe fallen. Aber auch eine generell gute Gebrauchstauglichkeit für andere User sollte nach den Kriterien des Brutalism vorhanden sein.

4. Eine brutalische Webseite strahlt Funktionalität aus, was bedeutet, dass Inhalt und Informationen schnell, einfach und effektiv vermittelt werden, ohne den Benutzer durch unnötige Animationen, Funktionen und Effekte abzulenken oder zu behindern. Auch bei diesem Kriterium spielen die oben genannten Punkte der Usability eine wichtige Rolle, vor allem aber die Punkte der Aufgabenangemessenheit und der Erwartungskonformität. Zu einem Teil gehören die soziale Vision und die ausgestrahlte Funktionalität zusammen, da sie sich beide mit Eigenschaften der Usability befassen.

5. Das Gefühl welches ein brutalistisches Gebäude vermittelt, spielt beim Web Brutalism eine eben so wichtige Rolle. Denn auch brutalistisches Webdesign möchte beim Betrachter eine Reaktion hervorrufen, dabei ist es jedoch zuerst einmal nicht wichtig ob das Gefühl negativ oder positiv ist, solange der Benutzer der Webseite zusätzliche Aufmerksamkeit schenkt. Wie auch beim Architekturstil ist dieses Gefühl aber schwer zu definieren. Hingegen geht es beim Web Brutalism weniger um Dramaturgie als mehr um Ironie, Rebellion und einem teilweise unbehaglichen Gefühl. Dieses Kriterium kann allerdings im Widerspruch mit dem Kriterium der Funktionalität stehen. Ebenso wichtig ist bei diesem Punkt die User Experience, denn es geht um das Gefühl, welches die brutalistische Webseite dem User vermittelt, was nicht zwingend positiv sein muss, wie auch Pascal Deville in einem Interview sagt: Rohes, unbequemes Web Design, welches jeglichen UX Normen widerspricht [...] (Deville 2017).

Wenn man den Web-Brutalismus wörtlich nimmt und die festgelegten Kriterien anwendet, dann entsprechen viele der dargestellten Webseiten auf brutalistwebsites.com nicht dem was eine brutalistische Webseite aus macht. Viele der ausgestellten Webseiten auf brutalistwebsites.com lassen sich anderen ähnlichen Kategorien zuordnen, wie dem Grunge, dem postmodernen Stil. Diese haben ein eher minimalistisches Design oder sind selbstironisch. Wenn man die Kriterien der brutalistischen Architektur konvertiert und anwendet, müssten echte brutalistische Webseiten also wie eine der folgenden Webseiten aussehen. Bei den folgenden Webseiten beurteilt der Verfasser die jeweiligen Startseiten nach den festgelegten Kriterien, nicht die Kategorie oder Detailseiten:Beispiele auf der nächsten Seite