{"id":125037,"date":"2022-04-07T10:53:57","date_gmt":"2022-04-07T10:53:57","guid":{"rendered":"https:\/\/elementor.com\/blog\/was-ist-brutalismus-in-der-webgestaltung-und-wie-man-ihn-einsetzt-7-hervorragende-beispiele\/"},"modified":"2025-12-01T21:32:49","modified_gmt":"2025-12-01T19:32:49","slug":"was-ist-brutalismus-in-der-webgestaltung-und-wie-man-ihn-einsetzt-7-hervorragende-beispiele","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/de\/was-ist-brutalismus-in-der-webgestaltung-und-wie-man-ihn-einsetzt-7-hervorragende-beispiele\/","title":{"rendered":"Was ist Brutalismus in der Webgestaltung? und wie man ihn einsetzt + 7 hervorragende Beispiele"},"content":{"rendered":"\n<p>Brutalismus ist einer jener Trends, die in der Webgestaltung zu kommen und zu gehen scheinen. Dies liegt nicht daran, dass brutalistisches Design keinen gro\u00dfen Wert h\u00e4tte. Es liegt vielmehr daran, dass es nicht immer zum Stil und Ton der Zeit passt. <\/p>\n\n<p>Das ist Teil dessen, was Brutalismus so faszinierend macht. W\u00e4hrend die meisten Websites dazu neigen, sich einzureihen und von Jahr zu Jahr die gleichen grundlegenden Trends zu \u00fcbernehmen, kann eine Website, die sich nicht an die Regeln h\u00e4lt, leicht die Aufmerksamkeit auf sich ziehen. <\/p>\n\n<p>Man muss nur wissen, ob das die richtige Art von Licht ist, die man auf die Marke werfen m\u00f6chte. Brutalismus kann manchmal kalt und d\u00fcster wirken. Wenn er nicht richtig umgesetzt oder nicht f\u00fcr die richtige Art von Marke verwendet wird, kann er falsche Signale an Website-Besucher senden. <\/p>\n\n<p>In diesem Leitfaden zum Brutalismus in der Webgestaltung werden wir er\u00f6rtern, was er ist und wie er sich von minimalistischen und Anti-Design-Trends unterscheidet. Dar\u00fcber hinaus werden wir die Prinzipien, die den Brutalismus leiten, aufschl\u00fcsseln, einige Beispiele brutalistischer Websites zeigen und Vorschl\u00e4ge unterbreiten, wann und wann nicht man ihn einsetzen sollte.<\/p>\n\n<p class=\"read-more-link\"><a href=\"https:\/\/elementor.com\/blog\/principles-of-website-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">20 Prinzipien des Webdesigns, die jeder Webprofi kennen sollte<\/a><\/p>\n\n<div class=\"wp-block-group article-toc is-layout-flow wp-block-group-is-layout-flow\">\n<h4 class=\"wp-block-heading\">Inhaltsverzeichnis<\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"#whatis\">Was ist brutalistisches Webdesign?<\/a><\/li><li><a href=\"#history\">Eine kurze Geschichte des Brutalismus<\/a><\/li><li><a href=\"#brutalistvsminimalist\">Brutalistisches vs. minimalistisches Webdesign<\/a><\/li><li><a href=\"#4principles\">4 Prinzipien des Brutalismus im Webdesign<\/a><\/li><li><a href=\"#7examples\">7 Beispiele f\u00fcr brutalistisches Webdesign<\/a><\/li><li><a href=\"#shouldyouuse\">Sollten Sie Brutalismus auf Websites verwenden?<\/a><\/li><li><a href=\"#conclusion\">Fazit<\/a><\/li><\/ul>\n<\/div>\n\n<h2 class=\"wp-block-heading\" id=\"whatis\">Was ist brutalistisches Webdesign?<\/h2>\n\n<p>Brutalismus im Webdesign ist ein roher, schlichter und transparenter Stil, der Funktionalit\u00e4t \u00fcber Form und Effektivit\u00e4t \u00fcber \u00c4sthetik stellt. Er zeichnet sich durch sein rohes Erscheinungsbild und einen extrem simplifizierten und minimalistischen Ansatz aus.<\/p>\n\n<p>Brutalismus ist ein Designstil, der seinen Ursprung in der Architektur der 1950er Jahre hat. Das Wort &#8218;Brutalismus&#8216; stammt vom franz\u00f6sischen <em>brut<\/em>, was &#8218;roh&#8216; bedeutet. <\/p>\n\n<p>Das <a rel=\"noreferrer noopener\" href=\"https:\/\/www.nycurbanism.com\/brutalnyc\/metbreuer\" target=\"_blank\">Met Breuer,<\/a> ehemals das Geb\u00e4ude des Whitney Museum of American Art, ist ein gutes Beispiel daf\u00fcr, wie brutalistisches Design in der Architektur Funktion \u00fcber Form stellt:<\/p>\n\n<figure class=\"wp-block-image size-full is-resized\"><img fetchpriority=\"high\" decoding=\"async\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=840,h=840\/blog\/wp-content\/uploads\/2022\/04\/1024px-MET_Breuer_48377070386.jpg\" alt=\"\" class=\"wp-image-83441\" width=\"840\" height=\"840\"\/><figcaption>Met Breuer Geb\u00e4ude (ehemals Whitney Museum of American Art). Quelle: <a href=\"https:\/\/creativecommons.org\/licenses\/by\/2.0\/deed.en\" target=\"_blank\" rel=\"noreferrer noopener\">Ajay Suresh<\/a><\/figcaption><\/figure>\n\n<p>Es ist eine massive Struktur mit markanten Merkmalen, aus Rohmaterialien erbaut. Die Website des Whitney Museums ist eine ebenso pr\u00e4zise Repr\u00e4sentation dessen, wie Brutalismus im Webdesign aussieht:<\/p>\n\n<figure class=\"wp-block-video\"><video autoplay=\"\" loop=\"\" muted=\"\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2022\/04\/2-whitney-museum-brutalism-web-design.mp4\"><\/video><\/figure>\n\n<p>W\u00e4hrend brutalistische Websites m\u00f6glicherweise nicht die megalithische und strenge Pr\u00e4senz haben, die brutalistische Geb\u00e4ude aufweisen, sind sie in \u00e4hnlicher Weise unter Verwendung der Rohmaterialien des Webs konstruiert. Dies bedeutet eine st\u00e4rkere Abh\u00e4ngigkeit von HTML anstelle von <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/what-is-css\/\" title=\"CSS\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"4489\">CSS<\/a> und JavaScript. <\/p>\n\n<p>Dies sind einige der identifizierbaren Merkmale dieser Webdesign-Technik: <\/p>\n\n<ul class=\"wp-block-list\"><li>Roher Text<\/li><li>Systemschriftarten<\/li><li>Unterstrichene Hyperlinks<\/li><li>Websichere Farben<\/li><li>Monochromasie<\/li><li>Einfarbige Hintergr\u00fcnde mit wenig bis gar keiner Dekoration (also keine Farbverl\u00e4ufe)<\/li><li>Geometrische Komponenten und scharfe Kanten<\/li><li>Unbearbeitete Fotos \u2014 d.h. keine Rahmen, Schattierungen, Abrundungen, etc.<\/li><li>Offene Navigation (im Gegensatz zu Dropdown- oder Hamburger-Men\u00fcs)<\/li><li>Trennlinien zwischen Abschnitten<\/li><li>In Tabellen enthaltener Inhalt<\/li><li>Umrisskn\u00f6pfe<\/li><\/ul>\n\n<p>W\u00e4hrend viele brutalistische Websites diese Merkmale teilen, werden die Designs nicht immer auf die gleiche Weise umgesetzt \u2014 insbesondere wenn Webdesigner Brutalismus in moderne Designtechniken einflie\u00dfen lassen. Beispielsweise enth\u00e4lt die Website des Whitney Museums eine nach heutigen Webdesign-Standards vorhersehbare Struktur, w\u00e4hrend sie gleichzeitig viele Bilder verwendet. <\/p>\n\n<h2 class=\"wp-block-heading\" id=\"history\">Eine kurze Geschichte des Brutalismus<\/h2>\n\n<p>Der Brutalismus entstand in den 1950er Jahren in Europa, als L\u00e4nder versuchten, nach dem Zweiten Weltkrieg wiederaufzubauen. Einer der Hauptgr\u00fcnde f\u00fcr die Verfolgung dieses minimalistischen Designstils war seine Kosten- und Ressourceneffizienz. W\u00e4hrend freiliegende Beton- und Ziegelfassaden sowie monochrome Farbpaletten m\u00f6glicherweise nicht zu den attraktivsten Geb\u00e4uden f\u00fchrten, waren sie einfacher und kosteng\u00fcnstiger zu errichten. <\/p>\n\n<p>L\u00e4nder wie das Vereinigte K\u00f6nigreich (wo der Brutalismus seinen Ursprung hatte) \u00fcbernahmen den Brutalismus, weil er eine praktische und kosteng\u00fcnstige M\u00f6glichkeit war, funktionale Wohnungen, Bildungseinrichtungen und Regierungsgeb\u00e4ude zu bauen. Die Sowjetunion war ein weiteres Land, das den Brutalismus nach dem Zweiten Weltkrieg \u00fcbernahm. Sie tat dies, um ihre Wohnungskrise zu bew\u00e4ltigen. Es war auch eine M\u00f6glichkeit, die H\u00f6flichkeit und Extravaganz der Bourgeoisie abzulehnen.<\/p>\n\n<p>Die brutalistische Bewegung ging schlie\u00dflich in den 1970er Jahren zur\u00fcck. W\u00e4hrend die g\u00fcnstigen, rohen Materialien, die Architekten f\u00fcr den Bau brutalistischer Geb\u00e4ude verwendeten, einen schnellen Wiederaufbau und Wachstum erm\u00f6glichten, erhielten die bedrohlichen, rauen Formen aufgrund ihrer scheinbaren K\u00e4lte, H\u00e4rte und Assoziation mit dem Kommunismus einen negativen Ruf. <\/p>\n\n<p>Allerdings verschwand der Brutalismus nicht vollst\u00e4ndig. Websites, die in den fr\u00fchen Tagen des Internets gebaut wurden, waren brutalistisch. <\/p>\n\n<p>Tats\u00e4chlich behalten einige der Websites aus den 90er Jahren, die heute noch existieren, diesen Stil bei. Das 1995 gegr\u00fcndete <a href=\"https:\/\/craigslist.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">Craigslist<\/a> ist eines der bekanntesten Beispiele f\u00fcr den brutalistischen <a href=\"https:\/\/elementor.com\/blog\/web-design-trends\/\">Webdesign-Trend<\/a>. So sah es im Jahr 2000 aus:<\/p>\n\n<figure class=\"wp-block-image size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=841,h=676\/blog\/wp-content\/uploads\/2022\/04\/3-craigslist-sfbay-2000-screenshot.png\" alt=\"\" class=\"wp-image-83273\" width=\"841\" height=\"676\"\/><\/figure>\n\n<p>Es gibt keine Bilder \u2014 nur Spalte um Spalte mit blauen Links auf wei\u00dfem Hintergrund. So sieht die Website im Jahr 2022 aus: <\/p>\n\n<figure class=\"wp-block-image size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=834,h=426\/blog\/wp-content\/uploads\/2022\/04\/4-craigslist-sfbay-2022-screenshot.png\" alt=\"\" class=\"wp-image-83274\" width=\"834\" height=\"426\"\/><\/figure>\n\n<p>W\u00e4hrend die Seite ein raffinierteres Gef\u00fchl hat, bleiben die urspr\u00fcngliche Struktur und der rohe Designansatz gleich. Craigslist verzichtet auf die Bilder und den Wei\u00dfraum, die Sie auf einer konventionell attraktiven modernen Website finden w\u00fcrden. Stattdessen verwendet es Spalten\u00fcberschriften und blaue Hyperlinks, um seine Hauptseiten zu strukturieren.<\/p>\n\n<p>Es gibt viele Richtungen, in die Webdesigner mit Brutalismus gehen k\u00f6nnen. Es ist jedoch wichtig, ihn nicht mit Antidesign zu verwechseln. Dieser Designtrend entstand sowohl in der <a href=\"https:\/\/www.widewalls.ch\/magazine\/anti-design-italian-movement\" target=\"_blank\" rel=\"noreferrer noopener\">italienischen Architektur der 1960er Jahre<\/a> als auch im <a href=\"https:\/\/www.nngroup.com\/articles\/brutalism-antidesign\" target=\"_blank\" rel=\"noreferrer noopener\">Webdesign der 1990er Jahre<\/a> \u2014 er war durch grelle, \u00fcbertriebene und desorientierte Benutzeroberfl\u00e4chen gekennzeichnet. <\/p>\n\n<p>Der urspr\u00fcngliche Zweck des Brutalismus war es, Design und Konstruktion auf das Wesentliche zu reduzieren und praktischer zu gestalten. H\u00e4ssliche Designs waren leider manchmal das Nebenprodukt, aber nicht die urspr\u00fcngliche Absicht wie beim Antidesign. <\/p>\n\n<h2 class=\"wp-block-heading\" id=\"brutalistvsminimalist\">Brutalistisches vs. minimalistisches Webdesign<\/h2>\n\n<p>Auch wenn Sie ein brutalistisches Design vielleicht nicht mit einem <a href=\"https:\/\/elementor.com\/blog\/minimalist-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">minimalistischen Design<\/a> verwechseln w\u00fcrden, haben sie doch eine Gemeinsamkeit. Beide Designtrends drehen sich um die Idee, dass weniger mehr ist. Und dass jedes Element einem klaren Zweck dienen sollte. <\/p>\n\n<h3 class=\"wp-block-heading\">Einfachheit<\/h3>\n\n<p>Der Brutalismus neigt dazu, dieses Konzept zum Extrem zu treiben, indem er eine Website auf ihr skelettartiges Ger\u00fcst reduziert. Die Funktion ist weitaus wichtiger als die Form. <\/p>\n\n<p>Minimalismus hingegen zielt darauf ab, Einfachheit mit Sch\u00f6nheit in Einklang zu bringen, sodass die Details immer noch von Bedeutung sind. Standard-<a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/cms\/\" title=\"CMS\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"3000\">CMS<\/a>-Einstellungen, Systemschriftarten und \u00fcberstrapaziierte Farbpaletten haben im Minimalismus selten einen Platz. Stattdessen <a href=\"https:\/\/elementor.com\/blog\/tips-for-minimalist-web-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">planen Webdesigner sorgf\u00e4ltig jedes Detail in Bezug auf Abstand, Hierarchie, Symmetrie und mehr<\/a>.<\/p>\n\n<h3 class=\"wp-block-heading\">\u00c4sthetik<\/h3>\n\n<p>Brutalistische Designer neigen dazu, sich nicht zu sehr um Geschmack zu k\u00fcmmern. Das Ziel ist es, die vorhandenen Ressourcen zu nehmen und sie so zu implementieren, dass der Punkt effektiv vermittelt wird. Brutalismus ist wahrhaftig ein inhaltszentrischer Ansatz f\u00fcr die Gestaltung von Websites. <\/p>\n\n<p>Minimalistische Designer hingegen gehen intentionaler vor. W\u00e4hrend der Inhalt die wichtigste Komponente der Website darstellt, verwenden Designer mehr UI-Komponenten und scheuen sich nicht vor Stilisierung oder Animation, um die Aufmerksamkeit auf Schl\u00fcsselbereiche der Seite zu lenken.<\/p>\n\n<h3 class=\"wp-block-heading\">Relevanz<\/h3>\n\n<p>Ein weiterer bedeutender Unterschied zwischen diesen Designtrends liegt in ihrer praktischen Anwendbarkeit. Minimalismus ist seit langem ein etablierter Trend im Webdesign. Dies liegt daran, dass es sich um einen zeitlosen Designansatz handelt \u2014 schlichte, ansprechende und benutzerfreundliche Schnittstellen werden von Verbrauchern stets gesch\u00e4tzt. <\/p>\n\n<p>Brutalismus neigt dazu, eine wesentlich k\u00fcrzere Lebensdauer zu haben, wenn er nicht unter den Designtrends des Jahres auftaucht. Zudem bietet er nicht viele relevante Anwendungsf\u00e4lle. Es handelt sich \u00fcblicherweise um einen Trend, der von Kreativen adoptiert wird, deren Werke ebenso brutalistisch oder avantgardistisch sind.<\/p>\n\n<h2 class=\"wp-block-heading\" id=\"4principles\">4 Prinzipien des Brutalismus im Webdesign<\/h2>\n\n<p>Brutalismus h\u00e4lt sich nicht immer an die <a href=\"https:\/\/elementor.com\/blog\/principles-of-website-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">Prinzipien des Webdesigns<\/a>. Das bedeutet jedoch nicht, dass brutalistische Benutzeroberfl\u00e4chen unbrauchbar sind. Sie folgen lediglich einem anderen Regelwerk: <\/p>\n\n<h3 class=\"wp-block-heading\">1. Erreichen Sie das Notwendige mit dem Minimum<\/h3>\n\n<p>Brutalistisches Design l\u00e4sst keine Verschwendung zu. Sie verwenden nur das, was Sie ben\u00f6tigen, um eine effektive Website zu erstellen. Das bedeutet in der Regel, mit unstilisiertem HTML zu arbeiten und Standardeinstellungen f\u00fcr Schriften, Farben, Formen und so weiter zu verwenden. <\/p>\n\n<p>Auch die Funktionalit\u00e4t sollte unkompliziert und vereinfacht sein. Besucher sollten nicht durch \u00fcberm\u00e4\u00dfige Inhalte, ablenkende Funktionen oder langsam ladende Seiten belastet werden. <\/p>\n\n<h3 class=\"wp-block-heading\">2. Projizieren Sie St\u00e4rke und Stabilit\u00e4t durch Struktur<\/h3>\n\n<p>Eine brutalistische Website mag auf den ersten Blick primitiv erscheinen, doch k\u00f6nnen Sie durch diesen Designstil viel St\u00e4rke und Stabilit\u00e4t projizieren. Selbst wenn Ihre Webseiten nicht von \u00fcbergro\u00dfer, bedrohlich wirkender <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/best-fonts-for-websites\/\" title=\"Typografie\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"5430\">Typografie<\/a> dominiert werden, kann die offengelegte Struktur der Benutzeroberfl\u00e4che \u2014 wie trennende Linien, Tabellen und offene Navigation \u2014 einer Website ein robustes Gef\u00fchl verleihen. <\/p>\n\n<p>Die Verwendung von Grundfarben wie Schwarz, Wei\u00df und nat\u00fcrlichen Farben wie Grau, Beige und Kupfer wird ebenfalls dazu beitragen, dass eine Website <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/\" title=\"eine Website erstellen\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"402\">solider wirkt<\/a> \u2014 \u00e4hnlich den physischen Strukturen, nach denen sie modelliert ist. Raue, imperfekte Benutzeroberfl\u00e4chen mit harten Kanten tragen ebenfalls zu einem industrielleren Erscheinungsbild der Website bei.<\/p>\n\n<h3 class=\"wp-block-heading\">3. Ein effektives Design muss nicht attraktiv sein<\/h3>\n\n<p>Obwohl eine reduzierte Benutzeroberfl\u00e4che m\u00f6glicherweise nicht besonders ansprechend ist, k\u00f6nnte dies f\u00fcr Benutzer, die eine schnelle und einfache M\u00f6glichkeit zur Interaktion mit der Website und zur Konversion suchen, von geringer Bedeutung sein. <\/p>\n\n<p>Allerdings muss brutalistisches Webdesign nicht zwangsl\u00e4ufig h\u00e4sslich sein. Es gibt zahlreiche Beispiele f\u00fcr zeitgen\u00f6ssische und moderne brutalistische Architektur, M\u00f6bel und Websites, die aufwendig gestaltet sind, ohne verschwenderisch oder extravagant zu sein. <\/p>\n\n<h3 class=\"wp-block-heading\">4. Vermitteln Sie Transparenz durch Einfachheit<\/h3>\n\n<p>Als der Brutalismus erstmals in Erscheinung trat, war er eine praktische und effiziente Methode zur Errichtung von Geb\u00e4uden. Er stellte auch eine Herausforderung f\u00fcr die K\u00fcnstlichkeit und Leichtigkeit dar, die \u00fcberall sonst zu sehen war. <\/p>\n\n<p>Daher ist der heutige Brutalismus nicht nur n\u00fctzlich, um St\u00e4rke zu vermitteln. Seine rauen und unvollkommenen Schnittstellen k\u00f6nnen auch bestimmte Wahrheiten \u00fcber eine Marke vermitteln, die Worte allein manchmal nicht ausdr\u00fccken k\u00f6nnen. Brutalismus im Webdesign erm\u00f6glicht es Marken, ihr wahres Selbst zu pr\u00e4sentieren, und zwar auf eine Art und Weise, die viele Marken und Menschen nicht selbstbewusst genug w\u00e4ren zu tun. <\/p>\n\n<h2 class=\"wp-block-heading\" id=\"7examples\">7 Beispiele f\u00fcr brutalistisches Webdesign<\/h2>\n\n<p>Betrachten wir einige Beispiele brutalistischer Websites, die die verschiedenen Einsatzm\u00f6glichkeiten dieses Designtrends heute veranschaulichen: <\/p>\n\n<h3 class=\"wp-block-heading\">1. 56 Digital<\/h3>\n\n<figure class=\"wp-block-video\"><video autoplay=\"\" loop=\"\" muted=\"\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2022\/04\/5-56digital-portfolio-website-brutalism.mp4\"><\/video><\/figure>\n\n<p><a href=\"https:\/\/56.digital\/\" target=\"_blank\" rel=\"noreferrer noopener\">56 Digital<\/a> ist ein digitales Studio mit Sitz in Toronto. Was Sie oben sehen, ist die Portfolio-Website der Agentur. W\u00e4hrend potenzielle Kunden Portfolio-Grafiken unter der ausklappbaren Projektliste am unteren Rand finden, gibt es nicht viel zu betrachten. <\/p>\n\n<p>Es gibt keine nennenswerte Navigation \u2014 nur einige grundlegende Informationen \u00fcber das Unternehmen und Links zu deren sozialen Medien. Dar\u00fcber hinaus gibt es eine einfache Textliste der kreativen Dienstleistungen der Agentur. Darunter befindet sich eine Tabelle mit Projektnamen und Jahren. Erst wenn der Besucher mit dem Mauszeiger \u00fcber die Projektzeilen f\u00e4hrt, kann er das zugeh\u00f6rige Bild und eine einzeilige Beschreibung sichtbar machen. <\/p>\n\n<h3 class=\"wp-block-heading\">2. A2-TYPE<\/h3>\n\n<figure class=\"wp-block-video\"><video autoplay=\"\" loop=\"\" muted=\"\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2022\/04\/6-a2type-fonts-page-brutalism.mp4\"><\/video><\/figure>\n\n<p><a href=\"https:\/\/www.a2-type.co.uk\/\" target=\"_blank\" rel=\"noreferrer noopener\">A2-TYPE<\/a> ist eine unabh\u00e4ngige Schriftgie\u00dferei. Das obige GIF stammt von der Schriftartenseite des Unternehmens. Nichtsdestotrotz ist der Gro\u00dfteil dieser Website, was man als brutalistisch im Design bezeichnen w\u00fcrde \u2014 das gilt f\u00fcr die offene Navigation am oberen Rand der Website, die alle Seiten ohne Notwendigkeit der Interaktion anzeigt.<\/p>\n\n<p>Der Hintergrund dieser Seite ist in einem satten Magenta-Ton gehalten. Die Schriftarten werden in der gleichen Gr\u00f6\u00dfe, entlang derselben Spalte und innerhalb ihrer Kategorien gleichm\u00e4\u00dfig angeordnet pr\u00e4sentiert. Es gibt keine nennenswerten Bilder, aber das liegt daran, dass die eingebetteten Schriftarten ohnehin alles sind, was die Besucher sehen m\u00f6chten.<\/p>\n\n<h3 class=\"wp-block-heading\">3. Alicia Keys<\/h3>\n\n<figure class=\"wp-block-video\"><video autoplay=\"\" loop=\"\" muted=\"\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2022\/04\/7-aliciakeys-brutalist-web-design.mp4\"><\/video><\/figure>\n\n<p>In den letzten Jahren hat die S\u00e4ngerin, Songwriterin und Schauspielerin <a href=\"https:\/\/www.aliciakeys.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Alicia Keys<\/a> einen Punkt daraus gemacht, ihr \u00e4u\u00dferes Erscheinungsbild zu reduzieren, indem sie oft ohne Make-up bei hochkar\u00e4tigen Veranstaltungen auftritt. Daher waren wir nicht \u00fcberrascht zu sehen, dass ihre Website mit der gleichen Art von roher, authentischer Qualit\u00e4t durchdrungen ist. <\/p>\n\n<p>Die meisten Bilder auf der Startseite sind unbearbeitet. Mit anderen Worten, sie erscheinen auf der Seite in ihrer urspr\u00fcnglichen Gr\u00f6\u00dfe, Form und ihrem urspr\u00fcnglichen Container. Dar\u00fcber hinaus werden sie von sehr wenigen Worten begleitet, die in einer einfachen serifenlosen Typografie gestaltet sind.<\/p>\n\n<h3 class=\"wp-block-heading\">4. Apelido  Apelido<\/h3>\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1440\" height=\"789\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2022\/04\/Apelido-Apelido-Brutslist-Design.png\" alt=\"\" class=\"wp-image-83278\"\/><\/figure>\n\n<p><a href=\"https:\/\/apelido-apelido.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Apelido  Apelido<\/a> ist ein eigenwilliges digitales Designstudio mit einer ebenso eigenwilligen Website. Der obige Screenshot zeigt, wie der Hero-Bereich der Website aussieht. Es gibt keinen nennenswerten Header. Lediglich K\u00e4sten mit Text und einem ausgefallenen Logo. <\/p>\n\n<p>Die einseitige Website ist jedoch nicht vollst\u00e4ndig brutalistisch. Besucher begegnen zuf\u00e4lligen Animationen, einem interaktiven Video und einem G\u00e4stebuch anstelle eines traditionellen Kontaktformulars. <\/p>\n\n<h3 class=\"wp-block-heading\">5. Balenciaga<\/h3>\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1440\" height=\"789\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2022\/04\/Balenciaga-Brutalist-Design-2007.png\" alt=\"\" class=\"wp-image-83279\"\/><\/figure>\n\n<p><a href=\"https:\/\/www.balenciaga.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Balenciaga<\/a> hat schon lange mit seiner Mode die Grenzen des Konventionellen ausgelotet. Vor Jahren trieb das Unternehmen auch seine Website in Bezug auf den Stil ins Extreme. <\/p>\n\n<p>Was Sie oben sehen, ist ein Screenshot der Balenciaga-Homepage aus dem Jahr 2017. Das Design der Website \u00e4hnelte eher einem Wireframe als einer vollst\u00e4ndig ausgearbeiteten Website. Erst wenn die K\u00e4ufer sich durch die Kategorien bewegten, stie\u00dfen sie auf Produktbilder und eine vertrautere Benutzeroberfl\u00e4che.<\/p>\n\n<p>Heutzutage ist das brutalistische Design nicht mehr so allumfassend wie einst. So sieht die Website im Jahr 2022 aus: <\/p>\n\n<figure class=\"wp-block-video\"><video autoplay=\"\" loop=\"\" muted=\"\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2022\/04\/8-balenciaga-brutalism-website.mp4\"><\/video><\/figure>\n\n<p>Der Header, Footer, die Navigation, das Live-Chat-Widget und die Schaltfl\u00e4chen behalten das rudiment\u00e4re, wireframe-\u00e4hnliche Aussehen der Website bei. <\/p>\n\n<h3 class=\"wp-block-heading\">6. Drudge Report<\/h3>\n\n<figure class=\"wp-block-video\"><video autoplay=\"\" loop=\"\" muted=\"\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2022\/04\/9-drudgereport-brutalist-website.mp4\"><\/video><\/figure>\n\n<p><a href=\"https:\/\/www.drudgereport.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Drudge Report<\/a> ist eine Nachrichtenaggregationswebsite, die fast so lange existiert wie Craigslist. Genau wie Craigslist hat Drudge Report seinen brutalistischen Stil bis heute beibehalten. <\/p>\n\n<p>Obwohl Leser gelegentlich auf Bilder oder Werbebanner von Drittanbietern auf der Seite sto\u00dfen, besteht der Gro\u00dfteil der Benutzeroberfl\u00e4che aus einfachen Text-Links zu Artikeln und Nachrichtenquellen. Diese werden in einem einfachen schwarzen, unterstrichenen Stil dargestellt. Die Links sind zudem willk\u00fcrlich auf der Seite angeordnet, und jeder Abschnitt ist durch d\u00fcnne schwarze Linien unterteilt.<\/p>\n\n<h3 class=\"wp-block-heading\">7. Seth&#8217;s Blog<\/h3>\n\n<figure class=\"wp-block-video\"><video autoplay=\"\" loop=\"\" muted=\"\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2022\/04\/10-seths-blog-brutalist-website.mp4\"><\/video><\/figure>\n\n<p>Seth Godin ist ein Unternehmer und Autor, der einen brutalistisch gestalteten Blog namens <a href=\"https:\/\/seths.blog\/\">Seth&#8217;s Blog<\/a> betreibt. Es gibt keine Bilder auf der lang scrollbaren Seite. Die Navigation ist vollst\u00e4ndig und jederzeit auf der linken Seite sichtbar. Dar\u00fcber hinaus erscheinen alle Hyperlinks innerhalb des Beitrags als blaue, unterstrichene Textlinks. <\/p>\n\n<p>Obwohl dieser reine Textblog im Stil des Brutalismus gestaltet ist, weist er ein ansprechendes Design auf. Das liegt daran, dass er viele der UX-Prinzipien befolgt, die vorgeben, wie Designer Seiten basierend auf menschlicher Psychologie und Benutzerpr\u00e4ferenzen anordnen, gruppieren und gestalten sollten. <\/p>\n\n<h2 class=\"wp-block-heading\" id=\"shouldyouuse\">Sollten Sie Brutalismus auf Websites verwenden?<\/h2>\n\n<p>Brutalismus kann eine avantgardistische Herangehensweise an Webdesign sein. Aber es ist ein schwieriger Designtrend, den es zu meistern gilt \u2014 nicht nur in Bezug auf die Technik, sondern auch hinsichtlich des Wann und Wo der Anwendung. <\/p>\n\n<p>Wenn Sie vom Brutalismus fasziniert sind und sich fragen, wie Sie ihn im Web umsetzen k\u00f6nnen, hier einige Vor- und Nachteile, die Sie ber\u00fccksichtigen sollten: <\/p>\n\n<h3 class=\"wp-block-heading\">Die Vorteile von brutalistischem Webdesign<\/h3>\n\n<ul class=\"wp-block-list\"><li><strong>Sich von der Masse abheben:<\/strong> Eine brutalistische Website wird anders aussehen als alles, was die Konkurrenz macht, was die Marke automatisch hervorstechen l\u00e4sst. Dies ist besonders n\u00fctzlich f\u00fcr k\u00fcnstlerische Typen, die einen bleibenden Eindruck auf potenzielle Kunden, Nutzer oder K\u00e4ufer machen wollen. <\/li><li><strong>Maximale Effektivit\u00e4t:<\/strong> Im Brutalismus ist es unerheblich, ob eine Website attraktiv ist, solange sie effektiv ist. Wenn Sie \u00fcber ein fundiertes Verst\u00e4ndnis von Webdesign-Prinzipien und menschlicher Psychologie verf\u00fcgen, k\u00f6nnen Sie ablenkungsfreie und benutzerfreundliche Benutzeroberfl\u00e4chen erstellen, die \u00e4u\u00dferst erfolgreich bei der Konvertierung von Nutzern sind. <\/li><li><strong>Minimierung von Kosten und Ressourcen:<\/strong> Brutalismus ist eine kosten- und ressourceneffiziente Methode zur Gestaltung von Websites. Wenn Sie mit einem Kunden zusammenarbeiten, der eine hochkonvertierende Website ohne \u00fcberfl\u00fcssige Zus\u00e4tze w\u00fcnscht, kann Brutalismus eine hervorragende M\u00f6glichkeit sein, diese Anforderung zu erf\u00fcllen.<\/li><li><strong>Schnellere Ladezeiten:<\/strong> Da brutalistische Designs haupts\u00e4chlich mit HTML erstellt werden und wenig Bildmaterial enthalten, profitieren Sie und Ihre Kunden vom Nebeneffekt der Geschwindigkeit. Ohne den CSS- und JavaScript-Ballast, der die Dinge verlangsamt, k\u00f6nnen brutalistische Websites sehr schnell laden &#8211; was sowohl f\u00fcr die Benutzererfahrung als auch f\u00fcr die Suchmaschinenoptimierung vorteilhaft ist.<\/li><\/ul>\n\n<h3 class=\"wp-block-heading\">Die Nachteile des brutalistischen Webdesigns<\/h3>\n\n<ul class=\"wp-block-list\"><li><strong>Visuell unattraktiv:<\/strong> Brutalistische Designs sind nicht immer optisch ansprechend. Obwohl \u00c4sthetik im Brutalismus keine Priorit\u00e4t hat, kann eine unattraktive Benutzeroberfl\u00e4che Besucher gem\u00e4\u00df dem <a href=\"https:\/\/lawsofux.com\/aesthetic-usability-effect\/\" target=\"_blank\" rel=\"noreferrer noopener\">\u00c4sthetisch-Usability-Effekt<\/a> abschrecken. <\/li><li><strong>Negative Assoziationen:<\/strong> Brutalismus hat keinen besonders guten Ruf, da viele diese Designs als kalt, d\u00fcster, rau, bedrohlich, postapokalyptisch und mit einer Reihe anderer negativer Beschreibungen assoziieren. Seien Sie vorsichtig damit, wie roh Sie Ihre Designs gestalten, da sonst die Marke ebenfalls mit diesen Attributen in Verbindung gebracht werden k\u00f6nnte. <\/li><li><strong>Nicht langlebig:<\/strong> Im Gegensatz zum Minimalismus, der stets modern und zeitgem\u00e4\u00df wirkt, ist brutalistisches Webdesign nicht der best\u00e4ndigste Trend. Wenn Sie es auf einer Website einsetzen, m\u00fcssen Sie deren Leistung wahrscheinlich genau \u00fcberwachen und eine Neugestaltung vornehmen, sobald das Engagement und die Konversionsraten sinken. <\/li><li><strong>Weniger lesbar:<\/strong> Brutalistische Websites sind nicht unbedingt die angenehmsten f\u00fcr l\u00e4ngeres Betrachten. Sie m\u00fcssen daher sorgf\u00e4ltig abw\u00e4gen, wann Sie diesen Stil einsetzen. M\u00f6glicherweise m\u00fcssen Sie einige der Regeln des Brutalismus &#8218;brechen&#8216;, um Balance, Raum und andere Elemente in die Benutzeroberfl\u00e4che einzubringen, um sie lesbarer zu gestalten.<\/li><\/ul>\n\n<h2 class=\"wp-block-heading\" id=\"conclusion\">Fazit <\/h2>\n\n<p>Obwohl der Brutalismus seine Wurzeln in der Architektur der 1950er Jahre in Europa hat, experimentiert das Internet seit Jahrzehnten mit diesem Webdesign-Trend. Allerdings ist brutalistisches Design nicht wie moderne Designtrends wie Minimalismus oder <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/flat-design\/\" title=\"flaches Design\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"7489\">Flat Design<\/a>, die gekommen sind, um zu bleiben. <\/p>\n\n<p>Brutalismus ist eine besondere Art des Webdesigns. Er funktioniert gut f\u00fcr eigenwillige, kreative Marken und Individuen. Diese regelsprengende Designtechnik wird jedoch nicht immer positiv aufgenommen, unabh\u00e4ngig davon, wie genau man ihre Grundprinzipien befolgt. <\/p>\n\n<p>W\u00e4hrend es heute einige hervorragende Beispiele f\u00fcr Brutalismus im Web gibt, haben viele dieser Marken den altmodischen Brutalismus mit modernen Designtrends vermischt, um ihre Benutzerfreundlichkeit zu gew\u00e4hrleisten. Wenn Sie in Erw\u00e4gung ziehen, diesen Webdesign-Trend zu nutzen, sollten Sie dies ber\u00fccksichtigen. <\/p>\n\n<p>Die heutigen Konsumenten haben sich an attraktive Benutzeroberfl\u00e4chen gew\u00f6hnt. Brutalismus, der ins Extreme getrieben wird, k\u00f6nnte f\u00fcr sie eine zu verst\u00f6rende Erfahrung darstellen. Daher w\u00e4re es eine sichere Herangehensweise, ein gutes Gleichgewicht zwischen Brutalismus und modernem Minimalismus zu finden, um mit dieser Technik zu experimentieren.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Brutalismus ist eine besondere Art der Webgestaltung, die sich gut f\u00fcr exzentrische, kreative Marken und Individuen eignet. Allerdings muss diese regel\u00fcberschreitende Gestaltungstechnik mit Bedacht eingesetzt werden. Lesen Sie diesen Leitfaden, um herauszufinden, wie.<\/p>\n","protected":false},"author":2024221,"featured_media":125038,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[359,307],"tags":[],"marketing_persona":[],"marketing_intent":[48],"class_list":["post-125037","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-de","category-inspiration-de"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Brutalistische Webgestaltung: Was es ist + 7 hervorragende Beispiele<\/title>\n<meta name=\"description\" content=\"Brutalismus ist eine besondere Art der Webgestaltung, die sich gut f\u00fcr exzentrische, kreative Marken und Individuen eignet. Allerdings muss diese regel\u00fcberschreitende Gestaltungstechnik mit Bedacht eingesetzt werden\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/blog\/de\/was-ist-brutalismus-in-der-webgestaltung-und-wie-man-ihn-einsetzt-7-hervorragende-beispiele\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Brutalistische Webgestaltung: Was es ist + 7 hervorragende Beispiele\" \/>\n<meta property=\"og:description\" content=\"Brutalismus ist eine besondere Art der Webgestaltung, die sich gut f\u00fcr exzentrische, kreative Marken und Individuen eignet. Allerdings muss diese regel\u00fcberschreitende Gestaltungstechnik mit Bedacht eingesetzt werden\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/de\/was-ist-brutalismus-in-der-webgestaltung-und-wie-man-ihn-einsetzt-7-hervorragende-beispiele\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/elemntor\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-04-07T10:53:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-01T19:32:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2022\/04\/2022_3_blog_What-Is-Brutalism-in-Web-Design_1200_630.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Nofar Shviro\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@elemntor\" \/>\n<meta name=\"twitter:site\" content=\"@elemntor\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nofar Shviro\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"15\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/blog\/de\/was-ist-brutalismus-in-der-webgestaltung-und-wie-man-ihn-einsetzt-7-hervorragende-beispiele\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/de\/was-ist-brutalismus-in-der-webgestaltung-und-wie-man-ihn-einsetzt-7-hervorragende-beispiele\/\"},\"author\":{\"name\":\"Nofar Shviro\",\"@id\":\"https:\/\/elementor.com\/blog\/de\/#\/schema\/person\/31306277ab3ebca01fc9c15f33d61d8b\"},\"headline\":\"Was ist Brutalismus in der Webgestaltung? und wie man ihn einsetzt + 7 hervorragende Beispiele\",\"datePublished\":\"2022-04-07T10:53:57+00:00\",\"dateModified\":\"2025-12-01T19:32:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/de\/was-ist-brutalismus-in-der-webgestaltung-und-wie-man-ihn-einsetzt-7-hervorragende-beispiele\/\"},\"wordCount\":2969,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/de\/was-ist-brutalismus-in-der-webgestaltung-und-wie-man-ihn-einsetzt-7-hervorragende-beispiele\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2022\/04\/2022_3_blog_What-Is-Brutalism-in-Web-Design_1200_630.jpg\",\"articleSection\":[\"Design\",\"Inspiration\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/de\/was-ist-brutalismus-in-der-webgestaltung-und-wie-man-ihn-einsetzt-7-hervorragende-beispiele\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/de\/was-ist-brutalismus-in-der-webgestaltung-und-wie-man-ihn-einsetzt-7-hervorragende-beispiele\/\",\"url\":\"https:\/\/elementor.com\/blog\/de\/was-ist-brutalismus-in-der-webgestaltung-und-wie-man-ihn-einsetzt-7-hervorragende-beispiele\/\",\"name\":\"Brutalistische Webgestaltung: Was es ist + 7 hervorragende Beispiele\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/de\/was-ist-brutalismus-in-der-webgestaltung-und-wie-man-ihn-einsetzt-7-hervorragende-beispiele\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/de\/was-ist-brutalismus-in-der-webgestaltung-und-wie-man-ihn-einsetzt-7-hervorragende-beispiele\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2022\/04\/2022_3_blog_What-Is-Brutalism-in-Web-Design_1200_630.jpg\",\"datePublished\":\"2022-04-07T10:53:57+00:00\",\"dateModified\":\"2025-12-01T19:32:49+00:00\",\"description\":\"Brutalismus ist eine besondere Art der Webgestaltung, die sich gut f\u00fcr exzentrische, kreative Marken und Individuen eignet. Allerdings muss diese regel\u00fcberschreitende Gestaltungstechnik mit Bedacht eingesetzt werden\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/de\/was-ist-brutalismus-in-der-webgestaltung-und-wie-man-ihn-einsetzt-7-hervorragende-beispiele\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/de\/was-ist-brutalismus-in-der-webgestaltung-und-wie-man-ihn-einsetzt-7-hervorragende-beispiele\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/elementor.com\/blog\/de\/was-ist-brutalismus-in-der-webgestaltung-und-wie-man-ihn-einsetzt-7-hervorragende-beispiele\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2022\/04\/2022_3_blog_What-Is-Brutalism-in-Web-Design_1200_630.jpg\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2022\/04\/2022_3_blog_What-Is-Brutalism-in-Web-Design_1200_630.jpg\",\"width\":1200,\"height\":630},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/blog\/de\/was-ist-brutalismus-in-der-webgestaltung-und-wie-man-ihn-einsetzt-7-hervorragende-beispiele\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Design\",\"item\":\"https:\/\/elementor.com\/blog\/de\/category\/design-de\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Was ist Brutalismus in der Webgestaltung? und wie man ihn einsetzt + 7 hervorragende Beispiele\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/blog\/de\/#website\",\"url\":\"https:\/\/elementor.com\/blog\/de\/\",\"name\":\"Elementor\",\"description\":\"Website Builder for WordPress\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/blog\/de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/blog\/de\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/blog\/de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/elementor.com\/blog\/de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/de\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/elemntor\/\",\"https:\/\/x.com\/elemntor\",\"https:\/\/www.instagram.com\/elementor\/\",\"https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1\",\"https:\/\/en.wikipedia.org\/wiki\/Elementor\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/blog\/de\/#\/schema\/person\/31306277ab3ebca01fc9c15f33d61d8b\",\"name\":\"Nofar Shviro\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/elementor.com\/blog\/de\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/17b934f8fa68aa260345cca7d64531f17eae767be2a566b148149f9b83e24f54?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/17b934f8fa68aa260345cca7d64531f17eae767be2a566b148149f9b83e24f54?s=96&d=mm&r=g\",\"caption\":\"Nofar Shviro\"},\"description\":\"Nofar is a Visual Designer at Elementor, specializing in illustrations and landing pages. She appreciates good typography, print, and magazines and loves all things black. When she is not working, Nofar enjoys binge-watching, sunsets, and online shopping.\",\"url\":\"https:\/\/elementor.com\/blog\/de\/author\/nofars-2\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Brutalistische Webgestaltung: Was es ist + 7 hervorragende Beispiele","description":"Brutalismus ist eine besondere Art der Webgestaltung, die sich gut f\u00fcr exzentrische, kreative Marken und Individuen eignet. Allerdings muss diese regel\u00fcberschreitende Gestaltungstechnik mit Bedacht eingesetzt werden","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/blog\/de\/was-ist-brutalismus-in-der-webgestaltung-und-wie-man-ihn-einsetzt-7-hervorragende-beispiele\/","og_locale":"de_DE","og_type":"article","og_title":"Brutalistische Webgestaltung: Was es ist + 7 hervorragende Beispiele","og_description":"Brutalismus ist eine besondere Art der Webgestaltung, die sich gut f\u00fcr exzentrische, kreative Marken und Individuen eignet. Allerdings muss diese regel\u00fcberschreitende Gestaltungstechnik mit Bedacht eingesetzt werden","og_url":"https:\/\/elementor.com\/blog\/de\/was-ist-brutalismus-in-der-webgestaltung-und-wie-man-ihn-einsetzt-7-hervorragende-beispiele\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2022-04-07T10:53:57+00:00","article_modified_time":"2025-12-01T19:32:49+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2022\/04\/2022_3_blog_What-Is-Brutalism-in-Web-Design_1200_630.jpg","type":"image\/jpeg"}],"author":"Nofar Shviro","twitter_card":"summary_large_image","twitter_creator":"@elemntor","twitter_site":"@elemntor","twitter_misc":{"Verfasst von":"Nofar Shviro","Gesch\u00e4tzte Lesezeit":"15\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/de\/was-ist-brutalismus-in-der-webgestaltung-und-wie-man-ihn-einsetzt-7-hervorragende-beispiele\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/de\/was-ist-brutalismus-in-der-webgestaltung-und-wie-man-ihn-einsetzt-7-hervorragende-beispiele\/"},"author":{"name":"Nofar Shviro","@id":"https:\/\/elementor.com\/blog\/de\/#\/schema\/person\/31306277ab3ebca01fc9c15f33d61d8b"},"headline":"Was ist Brutalismus in der Webgestaltung? und wie man ihn einsetzt + 7 hervorragende Beispiele","datePublished":"2022-04-07T10:53:57+00:00","dateModified":"2025-12-01T19:32:49+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/de\/was-ist-brutalismus-in-der-webgestaltung-und-wie-man-ihn-einsetzt-7-hervorragende-beispiele\/"},"wordCount":2969,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/de\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/de\/was-ist-brutalismus-in-der-webgestaltung-und-wie-man-ihn-einsetzt-7-hervorragende-beispiele\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2022\/04\/2022_3_blog_What-Is-Brutalism-in-Web-Design_1200_630.jpg","articleSection":["Design","Inspiration"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/de\/was-ist-brutalismus-in-der-webgestaltung-und-wie-man-ihn-einsetzt-7-hervorragende-beispiele\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/de\/was-ist-brutalismus-in-der-webgestaltung-und-wie-man-ihn-einsetzt-7-hervorragende-beispiele\/","url":"https:\/\/elementor.com\/blog\/de\/was-ist-brutalismus-in-der-webgestaltung-und-wie-man-ihn-einsetzt-7-hervorragende-beispiele\/","name":"Brutalistische Webgestaltung: Was es ist + 7 hervorragende Beispiele","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/de\/was-ist-brutalismus-in-der-webgestaltung-und-wie-man-ihn-einsetzt-7-hervorragende-beispiele\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/de\/was-ist-brutalismus-in-der-webgestaltung-und-wie-man-ihn-einsetzt-7-hervorragende-beispiele\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2022\/04\/2022_3_blog_What-Is-Brutalism-in-Web-Design_1200_630.jpg","datePublished":"2022-04-07T10:53:57+00:00","dateModified":"2025-12-01T19:32:49+00:00","description":"Brutalismus ist eine besondere Art der Webgestaltung, die sich gut f\u00fcr exzentrische, kreative Marken und Individuen eignet. Allerdings muss diese regel\u00fcberschreitende Gestaltungstechnik mit Bedacht eingesetzt werden","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/de\/was-ist-brutalismus-in-der-webgestaltung-und-wie-man-ihn-einsetzt-7-hervorragende-beispiele\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/de\/was-ist-brutalismus-in-der-webgestaltung-und-wie-man-ihn-einsetzt-7-hervorragende-beispiele\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/elementor.com\/blog\/de\/was-ist-brutalismus-in-der-webgestaltung-und-wie-man-ihn-einsetzt-7-hervorragende-beispiele\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2022\/04\/2022_3_blog_What-Is-Brutalism-in-Web-Design_1200_630.jpg","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2022\/04\/2022_3_blog_What-Is-Brutalism-in-Web-Design_1200_630.jpg","width":1200,"height":630},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/de\/was-ist-brutalismus-in-der-webgestaltung-und-wie-man-ihn-einsetzt-7-hervorragende-beispiele\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/de\/"},{"@type":"ListItem","position":2,"name":"Design","item":"https:\/\/elementor.com\/blog\/de\/category\/design-de\/"},{"@type":"ListItem","position":3,"name":"Was ist Brutalismus in der Webgestaltung? und wie man ihn einsetzt + 7 hervorragende Beispiele"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/blog\/de\/#website","url":"https:\/\/elementor.com\/blog\/de\/","name":"Elementor","description":"Website Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/blog\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/blog\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/elementor.com\/blog\/de\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/blog\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/elementor.com\/blog\/de\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/blog\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/elemntor\/","https:\/\/x.com\/elemntor","https:\/\/www.instagram.com\/elementor\/","https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1","https:\/\/en.wikipedia.org\/wiki\/Elementor"]},{"@type":"Person","@id":"https:\/\/elementor.com\/blog\/de\/#\/schema\/person\/31306277ab3ebca01fc9c15f33d61d8b","name":"Nofar Shviro","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/elementor.com\/blog\/de\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/17b934f8fa68aa260345cca7d64531f17eae767be2a566b148149f9b83e24f54?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/17b934f8fa68aa260345cca7d64531f17eae767be2a566b148149f9b83e24f54?s=96&d=mm&r=g","caption":"Nofar Shviro"},"description":"Nofar is a Visual Designer at Elementor, specializing in illustrations and landing pages. She appreciates good typography, print, and magazines and loves all things black. When she is not working, Nofar enjoys binge-watching, sunsets, and online shopping.","url":"https:\/\/elementor.com\/blog\/de\/author\/nofars-2\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/posts\/125037","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/users\/2024221"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/comments?post=125037"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/posts\/125037\/revisions"}],"predecessor-version":[{"id":125039,"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/posts\/125037\/revisions\/125039"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/media\/125038"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/media?parent=125037"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/categories?post=125037"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/tags?post=125037"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/marketing_persona?post=125037"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/de\/wp-json\/wp\/v2\/marketing_intent?post=125037"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}