Brutalistisches Webdesign, minimalistisches Webdesign und die Zukunft von Web UX

Veröffentlicht: 2022-03-11

Werden Websites chaotischer, unübersichtlicher und unfeiner? Werden die Regeln guten Designs gebrochen? Wird das Web hässlich? Ist das ein neuer Trend?

Wenn Sie wie die meisten Designer sind und genau aufpassen, was passiert, haben Sie das Wort Brutalismus schon eine Weile gehört. Brutalistische Websites entfernen sich von den benutzerfreundlichen Schnittstellen, die seit langem die beste Praxis der Branche sind, und konzentrieren sich stattdessen auf unvollkommene, handcodierte HTML-Sites. Es scheint, dass Designer die Regeln von UX, wie wir sie kennen, abstreifen und alles ein wenig chaotisch erscheinen lassen.

Die Grundsätze des schlanken, zeitgenössischen Designs sind so alltäglich, dass wir sie kaum als stilistische Wahl betrachten. „Gutes“ Webdesign bedeutet im Allgemeinen eines, das den Regeln des Minimalismus gehorcht. Saubere, einfache, übersichtliche Schnittstellen – aber das war nicht immer der Fall. Drehen wir die Uhr ein paar Jahrzehnte zurück.

Die Geburt des Webs

Webdesign hat seit 1991, als die erste Website veröffentlicht wurde, einen langen Weg zurückgelegt. Die Internet-Revolution begann damit, dass ihre ersten Webseiten ausschließlich textbasiert waren und die erste Generation von HTML nutzten.

World Wide Web erste Seite im Jahr 1991
Das allererste Website-„Design“, das am 6. August 1991 live ging.

Dann kam Flash mit all diesen verrückten animierten Seiten, an die sich sicher jeder erinnert. Die Entwicklung von CSS (Cascading Style Sheets) kam hinzu und gab Webdesignern noch mehr Kontrolle über Verbesserungen wie Hintergrundfarbe, Textgröße und Textstile im Code. JavaScript gab uns Dropdown-Menüs, erweiterte Navigation und Webformulare mit Fehlerprüfung.

Am Anfang wusste niemand, was „Webdesign“ wirklich bedeutet, und Pioniere des Webs etablierten Designmuster durch Versuch und Irrtum. Die frühe Ära des Webdesigns verwendete Layouts, die wenig auf formale Semantik und Zugänglichkeit achteten und sich stattdessen für Ästhetik statt Struktur entschieden.

Google-Website von 1998
Website von Google, 1998.

Um ihre Designs zu erstellen und zu strukturieren, verließen sich Designer stark auf HTML-Elemente wie Tabellen, verschachtelte Tabellen und unsichtbare 1-Pixel-Abstandsdateien, die ihnen die Möglichkeit gaben, kompliziertere, mehrspaltige Layouts zu erstellen. Es sorgte für einige ziemlich langweilige Schnittstellen.

CNN.com-Website aus dem Jahr 2000
Website von CNN, 2000.


Enron-Website von 2004
Website von Enron, 2004.

Mitte der 2000er Jahre wurden Websites mit sorgfältigeren Überlegungen zu ihrer Struktur geboren. Die Navigation befand sich oben in Ihrem Browser, und Kategorien wurden in einer linken Leiste platziert. Webseiten wurden kurz und schmal gehalten, die Inhalte auf viele Seiten verteilt, um die Nutzer nicht zum Scrollen zu zwingen. Die Designer lernten, was funktionierte, und begannen, bessere Websites zu erstellen, wobei sie dabei Standards und Best Practices etablierten.

Mit immer mehr Layoutoptionen kam eine Mischung aus lauten Benutzeroberflächen, die überall mit Bildern und Text gefüllt waren. Einige disziplinierte Designer entschieden sich jedoch immer noch für Minimalismus.

Die minimalistische Ästhetik

Designtrends kommen und gehen; Minimalismus ist jedoch eine Designsprache, die im Laufe der Zeit präsent war. Es ist eine Designphilosophie, die sich auf die Vereinfachung der Form konzentriert, die durch die Verwendung der einfachsten und wesentlichsten Elemente in einem Design erreicht wird.

Minimalismus ist nicht exklusiv für Webdesign. Denken Sie an all die Elemente um Sie herum, die dieses Designideal umfassen; Es ist einfach, minimalistische Designs mit Nest, Apple, Herman Miller und vielen anderen zu verbinden, die viele minimalistische Designer inspiriert haben.

Nest Home-Geräte im minimalistischen Design
Nest präsentiert sich mit schlichtem, schlichtem Produktdesign.


Herman Miller Eames Rosewood 670/671 Lounge Chair und ottomanisches minimalistisches Design
Der zeitlose, unersetzliche Büroklassiker Eames Lounge Chair.


MacBook Pro von Apple im minimalistischen Design
Ein schlanker, minimalistischer Stil ist die Visitenkarte von Apple.

Was macht Design von Herman Miller heute noch großartig? Sie sind einfach gut gestaltete Objekte mit zeitloser Ausstrahlung. Seine Designs passen sehr gut in zeitgenössische Häuser und Innenräume – sie fühlen sich auch heute noch frisch und modern an. Viele seiner Stücke sind minimalistisch gestaltet und lassen sich nicht wirklich an eine bestimmte Modeerscheinung binden. Sie bestehen immer noch den Test der Zeit.

Minimalistische Entwürfe von einem der renommiertesten Grafikdesigner seiner Zeit, Josef Müller-Brockmann, sind denen von Herman Miller sehr ähnlich: zeitlos . Muller-Brockmann hat den Minimalismus in den 1940er und 1950er Jahren in Form des Schweizer Designstils angenommen und gemeistert.

Jede überflüssige oder überflüssige Dekoration wurde aus seinem grafischen Design entfernt; Jedes Element in seinen Layouts hatte einen Zweck. Das Designdenken hinter diesem Ansatz ist es, das minimalistische digitale Designs heute sehr gut funktionieren lässt.

Josef Müller Brockmann Plakate
Sauberes, modernes Typografie- und Plakatdesign von Josef Müller Brockmann.

Wie sich der Minimalismus im digitalen Zeitalter etablierte

Die Geschichte findet immer einen Weg, uns einzuholen. Wie im Printdesign holte der Minimalismus und die Philosophie dahinter das Webdesign und andere digitale Artefakte ein. Denken Sie daran, wie Websites vor ein paar Jahren mit ihren glänzenden Schaltflächen, Zeilen und Textabsätzen aussahen, alles schrie nach Aufmerksamkeit.

Dann kam der skeuomorphe Trend, bei dem Designer Elemente entwarfen, die reale Objekte im digitalen Raum nachahmten. Erinnern Sie sich an die Lederpolsterung in Apples iCal?

Minimale Designs sind eigentlich beabsichtigt. Es ist ein Designansatz, der alles Unnötige weglässt und sich auf Elemente konzentriert, die maximale Aufmerksamkeit erregen sollen – und den Schwerpunkt auf den Inhalt legt.

Minimalistischer Webdesign-Startbildschirm
Fokussierung auf die Kernstärke einer Digitalagentur mit drei einfachen Worten. (Konvoi)


Startbildschirm-Website von Chylak
Dieses minimalistische E-Commerce-Design betont das Kleidungsstück und entfernt alle unnötigen Ablenkungen. (Chylak-Kleidung)


Minimalistisches iOS-App-Design
Ohne zusätzliches Durcheinander können sich die Benutzer mit dem minimalistischen App-Design von Invstr auf die wichtigsten Elemente der Benutzeroberfläche konzentrieren.

Die Vorteile minimalistischen Designs

Der minimalistische Designansatz hat sich aus vielen weiteren Gründen als nur wegen seines Aussehens durchgesetzt. Unser verbessertes Verständnis des Benutzerverhaltens, Design-Thinking-Prozesse und der Aufstieg von Content-First-Designprozessen haben dazu beigetragen, dieses Denken voranzutreiben. Das jüngste massive Wachstum mobiler Benutzer war ein starker Beschleunigungspunkt in Richtung Minimalismus, mit einem stärkeren Fokus auf UX und Benutzerfreundlichkeit.

Da die Benutzer jetzt jederzeit von unterwegs auf das Internet zugreifen, müssen sich Produktdesigner darauf konzentrieren, das im Kontext des Augenblicks absolut Wesentliche bereitzustellen: die richtigen Dinge auf die richtige Weise und zur richtigen Zeit, wo das Design reduziert ist seine grundlegendsten Merkmale.

Die mobile Nutzung macht mittlerweile mehr als die Hälfte aller Webbesuche aus, und diese Rate wird weiter steigen. Responsive Design hat die Spielregeln verändert und Designer gezwungen, „anders zu denken“. Responsives oder adaptives Design ist heute mehr denn je eine Notwendigkeit in der mobilen Welt, in der ein minimalistischer Designansatz von entscheidender Bedeutung ist.

Für den durchschnittlichen Benutzer scheint Minimalismus wahrscheinlich die am einfachsten zu gestaltende Sache zu sein. Es ist tatsächlich sehr, sehr schwierig, mit möglichst wenig visuellem Inhalt eine perfekte Balance zu erreichen und sich nur auf die wesentlichen Elemente mit äußerster Eleganz zu konzentrieren.

Die Zukunft des Minimalismus

Wir sollten Minimalismus als zeitloses Konzept betrachten, das Eleganz und Raffinesse ausstrahlt, und nicht als tatsächlichen Trend oder eine einfache vorübergehende Phase. Obwohl zeitlos und klassisch, wird es sich weiterentwickeln und verbessern, wie wir bereits seit seiner Einführung zu Beginn des 20. Jahrhunderts gesehen haben.

Beispielsweise war Googles Material Design eine der ersten großen Entwicklungen des vom Minimalismus inspirierten „flachen“ Designansatzes. Die Designer von Google hielten die Dinge einfach und minimalistisch, verbesserten ihre Designsprache jedoch durch die Verwendung von Schatteneffekten und den Konzepten von Bewegung und Tiefe. Material umfasst flaches Design mit einer besonderen Wendung: Nachahmung von Materialien aus der realen Welt.

Google Material Design Guidelines-Website
Website mit Google Material Design-Richtlinien.

Die Kehrseite des Minimalismus

Wie bei anderen Elementen im Leben müssen wir immer sowohl die Vor- als auch die Nachteile betrachten. Viele argumentieren, dass Websites heute wenig Geschmack haben und meistens alle gleich sind. Sie wissen schon – ein großes Heldenbild oder Video mit überlagertem Text, eine Reihe von Symbolen mit Text und so weiter. Jeder kann sich ein paar Minuten Zeit nehmen und 10 Seiten finden, die einander sehr ähnlich sehen. Ist dies das Spiegelbild unseres sich ständig ändernden Online-Verhaltens und unserer Vorlieben?

Designkonsistenz und Design für allgemeines Benutzerverhalten sind bei jedem Design äußerst wichtig, aber wir dürfen den Wert der Einzigartigkeit nicht vergessen. Sind wir faul geworden oder haben wir unsere Gedanken weg von der Einzigartigkeit hin zu einer effektiveren User-Experience-Strategie verlagert?

Landing Pages mit minimalistischem Design
Gut umgesetzt, aber wenig Originalität. Großes Heldenbild des Produkts, etwas Text und Miniaturansichten mit Text.

Brutalismus im Webdesign

Brutalismus kann in seiner Robustheit und seinem Mangel an Komfort oder Leichtigkeit als Reaktion einer jüngeren Generation auf die Leichtigkeit, den Optimismus und die Frivolität des heute allgegenwärtigen minimalistischen Webdesigns gesehen werden.

Manche lieben es, manche hassen es und viele andere verstehen es einfach nicht: brutalistische Websites.

Nehmen Sie Craigslist als Beispiel. Craigslist muss als der „Großvater“ der brutalistischen Websites betrachtet werden. Es ist nicht ästhetisch ansprechend und würde niemals auf www.awwwards.com erscheinen. Schwarzer Text, blaue Links, weißer Hintergrund. Es ist nicht schön. Es muss nicht sein, weil es funktioniert – und es funktioniert wirklich gut. Sie finden, was Sie kaufen oder verkaufen müssen, ohne viel Aufhebens oder Durcheinander und ohne irgendwelche fremden beweglichen Teile.

Craigslist-Website Webdesign im brutalistischen Stil
Craigslist ist eine Masse blauer Links. Ein Barebone, funktionale Benutzeroberfläche.

Seit seiner Gründung im Jahr 1996 hat Craigslist seine Popularität trotz – oder vielleicht wegen – seines äußerst nützlichen Designs beibehalten. Das Design hat sich in den letzten 20+ Jahren nicht wesentlich verändert.

Vielleicht durch das Beispiel von Craigslist inspiriert, feiert der brutalistische Stil ein Comeback. Das Folgende sind großartige Beispiele für gut ausgeführte Designs im brutalistischen Stil.

Kaufen Sie eine brutalistische Website der Design School
Die Purchase Design School zeigt eine Galerie mit Arbeiten als überladenen Kartenstapel auf einem körnigen Hintergrund mit Farbverlauf.


Beispiel für ein brutalistisches Website-Design
Konsept83 hat sich von den Anfängen des Internets inspirieren lassen.


Beispiel für brutalistisches Website-Design
Creative Show-off Utrecht verwendet kräftige Farben mit einem brutalistischen Designstil.


Website-Beispiel für brutalistisches Website-Design
Unkonventionelles, brutalistisches Design-Layout auf der Slugz-Website.

Diese brutalistischen Websites setzen sich im großen Stil durch. Warum sind diese Websites plötzlich so beliebt? Liegt es daran, dass einige Designer die Homogenisierung des Webs einfach satt haben?

In den Tagen, in denen UX-Design von größter Bedeutung ist, in denen das Benutzerverhalten und ein inhaltsorientierter Ansatz im Vordergrund stehen, ist die UX auf diesen Websites (absichtlich) schlecht. Im Gegensatz zu den Prinzipien des Minimalismus sind diese Designs mit Collagen aus Text und Bildern auffällig, bei denen das Layout (wiederum absichtlich) überall vorhanden ist.

Eine kurze Geschichte des Brutalismus

Der brutalistische Designstil ist nicht neu. Eine schnelle Suche auf Wikipedia wird Ihnen sagen, dass der Stil tatsächlich aus der brutalistischen Architektur der 1950er bis Mitte der 1970er Jahre stammt. Komisch, dass dem Brutalismus die modernistische Architekturbewegung folgte, in der Minimalismus der Schlüssel war.

Le Corbusier war einer der größten Pioniere dieser Bewegung. Seine Karriere umfasste fünf Jahrzehnte mit Gebäuden, die in Europa, Japan, Indien sowie Nord- und Südamerika entworfen wurden.

Der Begriff stammt vom französischen Wort „ brut “ für „roh“, wie Le Corbusier seine Materialwahl „ beton brut “, roher Beton, beschrieb. Das hyperfunktionalistische Design schien nur darauf ausgelegt zu sein, nützlich zu sein – nicht zu gefallen –, als ob es der Moderne den Finger zeigen würde.

Der Brutalismus versucht, sich einer Massenproduktionsgesellschaft zu stellen und den verwirrten und mächtigen Kräften, die am Werk sind, eine raue Poesie zu entlocken. Bisher wurde der Brutalismus stilistisch diskutiert, während sein Wesen ethisch ist. –Alison & Peter Smithson, Der neue Brutalismus, Architekturdesign (April 1957)

Brutalistische Designs lehnen das Erscheinungsbild rundweg ab und entscheiden sich für Funktion statt Form. Brutalistische Designer sind stolz darauf, Designs mit minimalem Aufwand und den billigsten verfügbaren Materialien auszuführen, um ein ehrlicheres, antibürgerliches Ergebnis zu erzielen.

Wohnkomplex Habitat 67 in Montreal im brutalistischen Stil erbaut
Am 27. April 1967 wurde Safdies städtischer Wohnkomplex mit dem Namen Habitat 67 auf der Expo 67, der Weltausstellung in Montreal, enthüllt.

Brutalismus im digitalen Zeitalter

Bloomberg hat den Stil auf seine Weise für seine Nachrichtenseite übernommen. Das Design ist fast grell und konzentriert sich klar auf rohe Funktionalität.

Brutalistische Website von Bloomberg
Homepage von Bloomberg.

Der Brutalismus erlebt ein solides Comeback. Hässliches, rohes, sich vom konventionellen Design befreiendes Design, verrückte Hover-Effekte und oberflächliche Ornamente sind allgegenwärtig. Viele Puristen halten diesen Trend für hart, rau, schroff, unbequem, konfrontativ und zynisch. Es ist. Absichtlich.

The Outline - brutalistisches Website-Design
The Outline, ein Online-Magazin, entscheidet sich für einen hellen, grellen, brutalistischen Stil, der seinen ausgefallenen redaktionellen Stil widerlegt.

Brutalismus hat einen primitiveren Designansatz und legt den Fokus zurück auf den Kern des Webdesigns: seinen Code. Brutalismus wird oft als „hässlicher“ Designtrend dargestellt, aber darüber müssen wir hinwegsehen. Die Philosophie hinter der brutalistischen Bewegung ist es, die Dinge nicht „hässlich“, sondern roh und schmucklos zu machen.

Wir könnten sagen, dass die heutigen brutalistischen Websites auf dem DIY-Web der 90er Jahre basieren und sich auf einen Inside-Out-Ansatz konzentrieren, anstatt die Funktionalität hinter einer schönen Fassade zu verstecken.

Das UI-Design für die beliebte Social-Sharing-Site Reddit ist kompromisslos roh und kastenförmig, vollgestopft mit Web-Typografie der späten 90er, unraffinierten schweren Steuerelementen und fast keinem vertikalen Atemraum.

Reddit
Reddit setzt auf Funktionalität und umfasst die hellblauen Links des frühen Webs.

Der Designer Pierre Buttin hat den Brutalismus mit einer Reihe neu gestalteter mobiler Apps auf ein neues Extrem gebracht. In seinem neuesten Projekt mit dem Titel „Brutalist Redesigns“ rendert Buttin Facebook, Instagram, Twitter und andere beliebte Apps in einem brutalistischen Stil mit textlastigen Layouts und abgeflachten Designs.

App-Designbeispiel im brutalistischen Stil von Facebook
Facebooks mobile App neu gestaltet in <a href=”https://www.theverge.com/2017/5/31/15717534/brutalist-web-design-app-facebook-google-pierre-buttin


App-Designbeispiel im brutalistischen Stil von Twitter
Der klare, leichte Designstil von Twitter, eine brutalistische Überarbeitung.

Brutalismus vs. Minimalismus

Brutalismus und Minimalismus sollten nicht vergleichend gesehen werden, sondern als eine neue Sichtweise und eine andere Herangehensweise an Design. Brutalismus ist ein Vorstoß gegen die Homogenisierung der heutigen Websites und Apps, aber bevor Designer überhaupt anfangen können, eine Website mit dem brutalistischen Ansatz zu entwerfen, müssen sie zuerst wissen, welche Regeln sie brechen werden.

Herkömmliches, minimalistisches Design wird nicht durch Brutalismus ersetzt. Wir müssen Brutalismus als eine Designkultur betrachten, die den Status quo herausfordert – eine Kultur, die es satt hat, gesagt zu bekommen, was „das Beste“ ist.

Bei der Wahl zwischen diesen Stilen für Ihr nächstes Projekt gibt es kein Richtig oder Falsch. Bevor Sie jedoch Ihre nächste Website oder App in einem brutalistischen Designstil entwerfen, stellen Sie sicher, dass Sie Ihr Publikum kennen. Gehen Sie das Risiko ein, wenn Sie glauben, dass das Unternehmen und Ihr Publikum es zu schätzen wissen.

Brutalistisches Webdesign erregt Aufmerksamkeit und die Markenbekanntheit wächst enorm schnell. Regeln sind gemacht um gebrochen zu werden. Wagen Sie es, das Web das Web sein zu lassen. Wagen Sie es, aufzufallen und seien Sie ein bisschen gewagt, auch wenn es ein bisschen seltsam ist.


Lassen Sie uns wissen, was Sie denken! Bitte hinterlassen Sie unten Ihre Gedanken, Kommentare und Ihr Feedback.

• • •

Weiterführende Literatur im Toptal Design Blog:

  • Die Gestaltungsprinzipien und ihre Bedeutung
  • Die besten UX-Designer-Portfolios – inspirierende Fallstudien und Beispiele
  • Erforschung der Gestaltungsprinzipien des Designs
  • Adobe XD vs. Sketch – Welches UX-Tool ist das Richtige für Sie?
  • Die 10 UX-Ergebnisse, die Top-Designer verwenden