Zum Inhalt wechseln
Dr. Web Logo seit 1997.
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
Menü
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Anmeldung
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
    • Berlin

    • Bonn

    • Dortmund

    • Dresden

    • Duisburg

    • Düsseldorf

    • Essen

    • Frankfurt am Main

    • Freiburg

    • Hamburg

    • Hannover

    • Köln

    • Leipzig

    • München

    • Nürnberg

    • Stuttgart

    • Wien

    • Zürich

  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web Logo seit 1997.
  • Agentur finden
  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web » Design » Mal was anderes: Mondrianismus im Webdesign

Mal was anderes: Mondrianismus im Webdesign

Facebook Icon. facebook Twitter Icon. twitter Xing Icon. xing Linkedin Icon. linkedin Whatsapp Icon. whatsapp
  • Ein Kommentar
Lesedauer: 3 Minuten
  • von Dieter Petereit
  • 19. April 2019

Inhaltsverzeichnis

Kennst du Mondrian? Nein, wirst du vermutlich sagen. Das ist unwahrscheinlich. Zumindest sein Kunststil wird dir bekannt vorkommen. Schau selbst.

Der Namensgeber: Piet Mondrian

Piet Mondrian war ein niederländischer Maler und Erfinder des Neo-Plastizismus, einer Kunstform, der er nahezu religiösen Status zuschrieb. Mondrian gehörte zu den Begründern der abstrakten Malerei und inspirierte etwa Walter Gropius zur Erfindung des weltberühmten Bauhaus-Architekturstils.

Mondrians mosaikartige Malereien hast du mit Sicherheit schon gesehen. Dieses Werk etwa heißt „Komposition mit Rot, Gelb, Blau und Schwarz“ und stammt aus dem Jahre 1921.

Piet Mondriaan 1921 Composition en rouge jaune bleu et noir Mal was anderes: Mondrianismus im Webdesign
Piet Mondrian [Public domain], via Wikimedia Commons

Etwa seit Anfang der Zwanziger bis zu seinem Tode im Jahre 1944 widmete sich Mondrian dieser Konzentration auf Primärfarben und klare Linien. Seine Formensprache inspiriert Künstler, aber auch Architekten bis zum heutigen Tage.

Mosaik als Gestaltungsraster

Mosaikartige Gestaltungsraster bieten sich indes nicht nur in der Architektur an, auch im Design zumeist rechteckiger Medien, wie Bildschirmen, erreichst du per Mosaik die beste Ausnutzung des vorhandenen Raums. So ist es kein Wunder, dass sich Screendesigner Inspiration beim niederländischen Neo-Plastizisten holen.

Das Konzept der unterschiedliche Kachelung des Bildschirms griff zunächst Microsoft für sein mobiles Betriebssystem auf und weitete es später auf die Desktop-Variante aus. Metro-Design, später in Modern Design umbenannt, repräsentierte eine Benutzeroberfläche, die als Mosaik angelegt war. Je größer die Kachel zur jeweiligen Interaktion war, desto wichtiger war sie entweder für den Benutzer oder die Funktionalität im Allgemeinen.

Dabei konnte es durchaus auch zu starker farblicher Kontrastierung der einzelnen Kacheln zueinander kommen. Zwingender Bestandteil des Konzeptes war das, anders als bei Mondrian, allerdings nicht.

Mondrianismus als Design-Stil

Es bedarf im Grunde keiner näheren Erläuterung, warum sich Mondrians Strukturkonzept auch für das Design von Websites anbietet. Gerade in Zeiten responsiver Websites und des Box-Modells von CSS, in jüngerer Zeit durch Features wie Flexbox und CSS Grid promotet, ist das Mosaik fast schon das logische Gestaltungsmodell.

Wenn wir nun kachelige Designs mit Animationen verbinden, die sich in rechteckig abgegrenzten Bildschirmbereichen natürlich besonders gut isolieren und somit gezielt anwenden lassen, können dabei beeindruckende Layouts entstehen.

Etliche Designer zeigen auf Dribbble, wie das aussehen kann.

twisted Mal was anderes: Mondrianismus im Webdesign

Twisted by Shota 

ekra ae 2 Mal was anderes: Mondrianismus im Webdesign

Mondrian by Stugbear

video reveal Mal was anderes: Mondrianismus im Webdesign

Video Reveal by Gil 

bkgrundbeirut2 Mal was anderes: Mondrianismus im Webdesign

landing page by Zak Steele-Eklund for Studio VØR 

Mal was anderes: Mondrianismus im Webdesign

Anxiety by Modis

ezgif 4 5a02be3eb7 Mal was anderes: Mondrianismus im Webdesign

Girsu by Zak Steele-Eklund for Studio VØR

Noch mehr Beispiele für Mondrianismen, teils auch recht entfernter Natur, findest du drüben bei den Kollegen von Muzli Design Inspiration.

Wie gefällt dir dieser Design-Stil? Für welche Projekte würde er sich am ehesten eignen?

(Der Beitrag erschien erstmals im Herbst 2017 und wird seitdem aktuell gehalten. Das letzte Update erfolgte im April 2019.)

Dieter Petereit

Dieter Petereit

Dieter Petereit ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für Technik-affine Medien wie T3N und Dr. Web. Dieter war acht Jahre lang Chefredakteur des Dr. Web Magazins.

Werde ein Sponsor. Kontaktiere uns →

Kostenloses SEO-Tool

Agenturpartner

WebOptimizer Logo mit der Aufschrift: Erfolgreich im Internet.

WebOptimizer – Webseiten und Online-Marketing der nächsten Generation

München

Chris Hortsch Webdesign Agentur Berlin Logo.

Chris Hortsch Webdesign

Berlin

orange services webdesign agentur esslingen logo

Orange Services

München

Agentur novomyo Logo.

novomyo – Online Marketing Agentur

Hamburg

pistis wordpress agentur logo

Philipp Pistis – WordPress Agentur

Zolling

Alle Agenturpartner

Lust auf mehr?

Symbolbild in einem Laptop eingebettet. Zu sehen ist ein Mitarbeiter einer Digitalagentur.
Digitalisierung

Die passende Digitalagentur finden: Das solltest Du beachten

Wir unterstützen Dich bei der Auswahl der passenden Digitalagentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→
SEO Agentur

SEO Agentur

Hier finden Sie eine geeignete SEO Agentur. Sie möchten eine bessere Sichtbarkeit Ihrer Website in Google & Co., mehr Traffic, höhere Conversions, mehr Umsatz? Eine professionelle SEO Agentur unterstützt Sie maßgeblich bei der Erreichung dieser wichtigen Ziele.

→
Mitarbeiter einer WordPress-Agentur mit einer Tasse Kaffee im Vordergrund.
WordPress

WordPress — eine gute Wahl für Ihre Unternehmenswebsite?

Hier finden Sie ein ausführliches FAQ zu WordPress als Entscheidungshilfe und eine Auswahl von professionellen WordPress Agenturen.

→

Eine Antwort zu „Mal was anderes: Mondrianismus im Webdesign“
— was ist Deine Meinung?

  1. Franziska sagt:
    22. April 2019 um 16:34 Uhr

    Mir gefällt so eine Art von Design sehr.
    In dem Artikel sind tolle Beispiele aufgeführt. Wäre natürlich super, wenn man diese runterladen könnte

    Antworten

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Agentur nach Schwerpunkt finden

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • Die besten WordPress Agenturen
  • So finden Sie die richtige SEO-Agentur
  • Ist WordPress eine gute Wahl für Ihre Website?
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • Die besten WordPress Agenturen
  • So finden Sie die richtige SEO-Agentur
  • Ist WordPress eine gute Wahl für Ihre Website?

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich
  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich

Aus unserem Magazin

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑