Material und Flat Design

Material Design

Das Material Design dient dazu, Apps und Websites zu gestalten und zu erstellen. Sein Ziel ist: Ordnung und Einheitlichkeit ins Webdesign zu bringen. Material Design ist ein Designsystem, das von Google im Jahr 2014 entwickelt wurde. Im Jahr 2014 schlug die Veröffentlichung von Material Design große Wellen in der Design Community. Um Material Design besser zu verstehen, gehen wir ganz kurz um die Entwicklung des Material Design ein. Das Material Design wurde von der physischen Welt inspiriert. Was Material Design wirklich vollbrachte, war die Abkehr von einem komplett flachen UI Design, hin zum Design von Oberflächen, die von Papier und Tinte inspiriert sind. Stelle dir das folgendermaßen vor: wenn man ein Blatt Papier frontal betrachtet, erscheint es flach und zweidimensional. In der realen Welt verhält es sich jedoch nicht so. Papier existiert in drei Dimensionen. Ein Blatt Papier erzeugt Schatten, Nähte und Falten und kann auf unsere Bedürfnisse zugeschnitten und in der Größe verändert werden. Das Material Design verwendet also „flache Elemente“. Allerdings sitzen diese Elemente auf verschiedenen Ebenen und können sich wie Papier und andere Objekte in der realen Welt verhalten, was digitalen Erfahrungen ein lebensechtes „Gefühl“ verleiht. Dies ermöglicht Benutzer*innen einer App oder Website, natürlicher auf das UI zu reagieren. Es verändert zudem wie sie Objekte berühren und sich um sie herumbewegen können, so wie sie es in der physischen Umgebung tun würden. Matias Duarte, der Vizepräsident vom Design Team bei Google, erklärt, warum dies eine wichtige Änderung für das Web war: „Im Gegensatz zu echtem Papier kann sich unser digitales Material auf intelligente Weise ausdehnen und verformen. Das Material hat physische Oberflächen und Kanten. Nähte und Schatten geben dem, was man anfassen kann, eine Bedeutung.“ Material Design behebt das Problem, das aus einem Mangel an Tiefe und anderen wichtigen Signifikanten im flachen Design resultiert. Außerdem brachte Material Design auch andere, sinnvolle Änderungen ins Design.

Was sind die Kernprinzipien von Material Design?

Beim Material Design geht es um mehr als nur das Hinzufügen von Ebenen oder Schatten zum Design. Es ist eine umfassende Ressource, die die Regeln für eine neue Designsprache festlegt. Ähnlich wie wir im Webdesign grundlegende Prinzipien haben, hat Material Design drei eigene Prinzipien:

Prinzip 1: Material ist eine Metapher

Stelle dir Material Design als die Digitalisierung der physischen Welt vor. Anstatt also Besucher*innen und Nutzer*innen zu bitten, eine digitale Erfahrung zu machen, wendet Material Design die Grundprinzipien unserer physischen Umgebung auf Apps und Websites an. Nimm zum Beispiel die Idee von Ursache und Wirkung. Wenn jemand eine bestimmte Aktion ausführt, erwartet er ein vorhersehbares Ergebnis. Indem wir UIs mit solchen physikalischen Eigenschaften ausstatten, können sich Benutzer*innen auf ihre Intuition und natürliche Handlungen verlassen, um sich mit Websites und Apps zu beschäftigen.

Prinzip 2: kühn, grafisch, gewollt

Die gesamte Material Foundation ist sehr umfassend. Jeder Abschnitt erklärt, wie die Komponente funktioniert und warum sie so funktionieren muss. Im Grunde gibt es eine Bedeutung und Logik hinter jeder Designentscheidung.

• Layout
• Navigation
• Farbe
• Typografie & Web-Schriftarten
• Sound (dies betrifft hauptsächlich Apps)
• Ikonografie
• Form
• Bewegung
• Interaktion
• Kommunikation (einschließlich Bilder, Schrift und Datenvisualisierung)

Material Design erklärte auch, wie genau man sie auf eine bestimmte Art und Weise gestalten sollte, um ein benutzer*innenorientiertes Erlebnis zu schaffen. Und was ist mit „fett“ und „grafisch“?
Zu Beginn konzentrierte sich Material Design stark auf rasterbasiertes Design, klare typografische Hierarchie, kühne Farbpaletten und sinnvolle Animationen. Material Design hat sich für stärkere, kräftige Farbpaletten eingesetzt, um mehr Kontrast und Tiefe in der Benutzeroberfläche zu schaffen.

Prinzip 3: Bewegung liefert Bedeutung

Es gibt drei Gründe, warum Material Design nach subtiler Bewegung im Design verlangt:

1. Um informativ zu sein und die Benutzer*innen wissen zu lassen, wo und wann die Aktion verfügbar war.
2. Um zu helfen, den Fokus zu setzen und die Benutzer*innen zu den wichtigsten Teilen der Seite zu führen.
3. Um ausdrucksstark zu sein und der Benutzer*innenoberfläche ein wenig Persönlichkeit und Freude zu verleihen.

Wie setzen Webdesigner Material Design heute ein?

Ein Designsystem ist dazu gedacht, für eine Marke entwickelt zu werden, damit sie ihren einzigartigen visuellen Stil verbreiten, konsistent anwenden und pflegen kann.

Material Design 2.0 als Retter in der Not

Als Reaktion auf die Kritik aus der Design Community, veröffentlichte Google 2018 inoffiziell Material Design 2.0. Was das heutige Aussehen von Material Design betrifft, ist ein Großteil des ursprünglichen Systems intakt. Es gab einige Aktualisierungen des Material Designs, um es moderner zu gestalten. Zum Beispiel gibt es jetzt eine größere Betonung von weißem Raum, die Verwendung von unteren Navigationsleisten und die Einbeziehung von bunten Icon Sets. Der dunkle Modus ist jetzt außerdem auch verfügbar. Darüber hinaus gibt es eine große Betonung der Barrierefreiheit und Internationalisierung. Also, Material Design ändert definitiv seine Richtlinien einhergehend mit der Zeit. Heutzutage wird Material Design 2.0 am besten als Toolkit verwendet.

Das Material-Toolkit

Dank der Überarbeitung des Material Designs ist das Designsystem nicht mehr dafür verantwortlich, die Kreativität und den Individualismus im Web einzuschränken. Designer haben Zugriff auf Starterkits und Werkzeuge wie:

• Icon-Sets
• Google Schriftarten
• Design Kits für Adobe, Sketch und Figma
• Material Design Vorlagen

Du findest hier auch Tools zur Designanpassung, die es dir ermöglichen, die Best Practices für das Design einzuhalten und gleichzeitig der Benutzeroberfläche ihren eigenen kreativen Stempel aufzudrücken:

• Farbe
• Form
• Typografie

Designer*innen haben außerdem Zugriff auf ein neues Tool, mit dem sie eigenes an Material Design erstellen können: UIs entwickeln, anstatt sich nur an die Farben, Schriftarten, Layouts usw. zu halten. 

Beispiele für Material Design

Das Material Design ist im Webdesign heutzutage aus mehreren Gründen nicht mehr so leicht zu erkennen. Zum einen war es immer ein offensichtlicherer Ansatz, wenn es in mobilen oder Web-Apps umgesetzt wurde.
Hinzu kommt die Tatsache, dass Material Design 2.0 Webdesigner*innen mehr Anpassungen ermöglicht hat. Werfen wir also einen Blick auf einige Websites, die heute die guten Seiten des Material Designs nutzen:

Elementor

Die Elementor Website www.elementor.com basiert auf vielen guten Designprinzipien, die uns das Material Design beschert hat: Die wichtigsten Schaltflächen auf der Seite sind so gestaltet, dass sie wie anklickbare Elemente aussehen und sich verwandeln, um Besucher*innen die Bestätigung zu geben: „Ja, Sie sollten hier klicken.“ Die Animation ist realistisch, so dass die Besucher*innen nur Grafiken sehen, die sich in erwartbarer Weise bewegen.

Think with Google

Es ist keine Überraschung, dass eine von Google betriebene Website hier zu den Beispielen gehört. Es gibt eine Reihe von Elementen, die Think with Google aus seinem Designsystem verwendet: Raster basiertes Design für einen gleichmäßigen, vorhersehbaren Fluss der Inhalte. Schatten, die einen Kontrast zwischen den Ebenen erzeugen und den Besucher*innen helfen, verschiedene Teile der Seite zu identifizieren, mit denen du dich beschäftigen solltest. Zudem findet man ein minimalistisches Design mit hellen Farbkontrasten, um die Aufmerksamkeit auf Calls to Action zu lenken.

Glue Lock

Glue Lock ist ein großartiges Beispiel dafür, wie man dem Material Design einen supermodernen und persönlichen Touch verleihen kann:

• Die Buttons sind fett gefärbt, sowie schwebeanimiert und stellen sicher, dass die Besucher*innen wissen, wo sie klicken müssen.
• Das dunkle Theme hält sich immer noch an die Prinzipien des Minimalismus und verwendet eine helle weiße Schrift und rotes Button Styling, um den dunklen Hintergrund auszugleichen.
• Es gibt eine klare Hierarchie und Organisation des Textes auf dieser Seite, mit Überschriften in viel größerer Schrift als der Fließtext.

Mockplus

Mockplus ist eine weitere Website, die die grundlegenden Prinzipien der Benutzer*innenfreundlichkeit aus dem Material Design aufgreift und dir einen individuellen Touch verleiht: Die Verwendung des hellen Markenrosas inmitten der ansonsten gedämpften Farbpalette hilft, Besucher*innen schnell zu den interessanten Punkten der Seite zu führen. Die Schattierung hinter wichtigen Elementen zieht diese Ebenen in den Vordergrund des Blickfelds der Besucher*innen.

Die Vorteile von Material Design:

Webdesigner*innen auf allen Ebenen profitieren von Material Design, sei es als Grundlage für ihre gesamte Arbeit oder als vertrauenswürdige Ressource, auf die sie von Zeit zu Zeit zurückgreifen. Es bietet einen umfassenden Überblick über die wichtigsten Komponenten und Verhaltensweisen einer Benutzer*innenoberfläche, was ihr Wert im Design ist und wie man sie einsetzt. Aufgrund seines Starts als Designsystem für Android Apps ist es ein Mobile Responsive Ansatz für das Design und ist dafür verantwortlich, dass Websites weiter in diese Richtung gedrängt werden. Google bietet umfangreiche Unterstützung für Entwickler*innen und Designer*innen an, die mehr aus Material Design herausholen wollen. Das Designsystem ist heutzutage viel flexibler und leistungsfähiger, sodass Designer*innen das Gute aus dem Material Design nehmen und es sich wirklich zu eigen machen können.

Die Nachteile von Material Design:

Wenn es zu streng befolgt wird, besteht die Gefahr, dass Websites und Apps einander ähneln. Manche Designer*innen haben das Gefühl, dass Material Design jegliche Freiheit und Kreativität im Design einschränkt, weil es ihnen alles vorschreibt. Manche sind vielleicht zu eingeschüchtert, um Material Design überhaupt auszuprobieren, weil der Schwerpunkt auf der Programmierung liegt. Das Designsystem war ursprünglich für App-Designer*innen gedacht, daher gibt es einige Teile, die für Webdesign nicht wirklich relevant sind. Und wenn Designer*in nicht das gesamte System nutzen kann, kann sich die resultierende Oberfläche so anfühlen, als würde ihr etwas fehlen. Einige der Designrichtlinien (wie farbenfrohe Oberflächen oder das ausgiebige Verwenden von Symbolen und Animationen) können Probleme für die Geschwindigkeit von Websites verursachen.

Material Design UI-Kit (User Interface Style Guide)

Verwende Material Design, um deine Website benutzer*innenfreundlicher und zugänglicher zu machen. Webdesigner*innen können Material Design für ihre eigenen Zwecke nutzen:

• Um eigene Designsysteme zu inspirieren.
•  Um vorgefertigte Komponenten oder Themes auszuleihen, die später für die eigene Arbeit angepasst werden können.
• Um sich an moderne Designprinzipien zu halten, die sicherstellen, dass das Nutzer*innenerlebnis immer an erster Stelle steht.

Denke daran, dass das Ziel von Material Design nicht darin besteht, nach Zahlen zu malen.

Flat Design

Ursprünge, Einsatzmöglichkeiten und Beispiele

Wenn du auf Minimalismus im Design stehst, solltest du mit Flat Design vertraut sein. Es ist beispielsweise eine großartige Möglichkeit, die Ladegeschwindigkeiten zu verbessern. Egal, ob du gerade erst mit deinem Webdesign-Geschäft begonnen hast oder schon seit Jahren als Designer*in arbeitest, hast du wahrscheinlich bemerkt, wie sehr sich das Gesicht des Webs von Jahr zu Jahr verändert. Beginnen wir damit, zu verstehen, was Flat Design genau ist.

Was ist Flat Design?

Flat Design ist ein moderner Designstil für Benutzeroberflächen, der sich durch die folgenden Eigenschaften auszeichnet:

• Eine moderne und digitalfreundliche Ästhetik
• Minimalistisches Styling
• Reichlich Weißraum
• Symmetrische, rasterbasierte Layouts
• 2D-Elemente
• Helle, kontrastreiche Farben
• Fett gedruckte, gut lesbare Typografie
• Symbolische Icons
• Einfachheit (also keine Farbverläufe, Texturen, abstrakte Formen)

Aufgrund seines Fokus auf Sauberkeit und Ordnung schafft Flat Design sehr funktionale Websites. Das flache Design ist nicht nur attraktiver, es ist auch platzsparender.

Schweizer Stil

Das Flat Design wurde vom Swiss Style inspiriert. Der Schweizer Stil, der auch als Internationaler Typografischer Stil bekannt ist, war eine Art von Grafikdesign, das Mitte des zwanzigsten Jahrhunderts populär wurde. Er war bekannt für:

• Minimalismus
•  Rasterbasierte Layouts
• Asymmetrische Layouts
• Lesbarkeit
• Die verbreitete Verwendung von serifenloser Typografie
• Storytelling mit einer Kombination aus Fotografie und Text
• Funktionalismus
• Microsoft und flaches Design

Das Unternehmen, das Flat Design in die moderne digitale Ära gebracht hat, ist Microsoft. Etwa 2010 begann Microsoft, die Oberflächen seiner Produkte auf ein komplett flaches und intuitiveres UI umzustellen. Apple übernahm den Trend schließlich im Jahr 2013 auf. Und kurz darauf explodierte Flat Design. Flat Design wurde zum „It“-Trend für alle Arten von digitalen Erlebnissen:

• Websites
• Apps
• Software Oberflächen
• Illustrationen
• Werbeanzeigen
• Logos und mehr

Allerdings hat das Flat Design, wie wir es damals kannten, in den letzten Jahren ein subtiles Facelifting erfahren, um einigen Usability Problemen Rechnung zu tragen.

Flat Design 2.0

Obwohl eine Flat Design Oberfläche sauberer und einfacher zu navigieren war, entfernte sie die Schlüsselsignifikanten, die bei den Nutzer*innen Klickvertrauen erzeugten. Zum Beispiel:

• Erhabene Schaltflächen
• Unterstrichene und farbige Hyperlinks
• Aktionsfähiger Text neben Symbolen oder Schaltflächen

Ursprünglich wurde das Material Design entwickelt, um dieses Problem zu beheben. Aber auch das war keine perfekte Lösung und musste selbst repariert werden. Deshalb ist heute Flat Design 2.0 der Designstil, den wir immer häufiger sehen. Einfache, aber fette Sans Serifs, scharf kontrastierende Farben und viel Weißraum dominieren weiterhin Flat Design UIs.

Die Vorteile von Flat Design

Hier sind einige der Gründe, warum Websites, die Flat Design Prinzipien verwenden, bei ihrem Publikum so gut ankommen:

• Das rasterbasierte Layout von Flat Design ist von Natur aus reaktionsfähig.
  Du kannst Flat Design verwenden, egal in welcher Design-Nische du dich bewegst.
• Die Tendenz zu flacher, neutraler Typografie und viel Platz führt zu besserer Lesbarkeit und Übersichtlichkeit.Einfach gestaltete Elemente sind leichter und schneller zu erfassen als überdetailierte Grafiken.
• Wiedererkennbare Icons führen Besucher*innen effizient und platzsparend durch die UI.
• Ablenkungsfreie, intuitive Oberflächen verbessern die Navigierbarkeit der Website.
• Der strategische Einsatz von Farbe, Kontrast und Hierarchie führt zu einer besseren Besucherbindung.

Viele der Eigenschaften (z. B. minimale Benutzeroberfläche, einfache Schriftgestaltung, kontrastreiche Farben) sind bei der Gestaltung barrierefreier Oberflächen nützlich.
Minimalistisch gestaltete Websites neigen dazu, die Belastung des Servers zu verringern, wodurch sich die Ladegeschwindigkeit verbessert.
Unterm Strich: Flat Design sieht nicht nur modern und sauber aus, sondern hilft auch, die Performance von Websites zu verbessern.

Die Kritikpunkte an Flat Design

Zusätzlich zu den oben genannten Kritikpunkten am Flat Design 2.0 wurde dem Flat Design auch „Über-Minimalismus“ vorgeworfen, d.h. seine Betonung der Einfachheit macht es schwierig, zwischen Grafiken und visuellen Hinweisen zu unterscheiden. Die Grafik, die von „Killed by“ Google auf Twitter geteilt wurde, ist ein gutes Beispiel: Google hat vor kurzem alle Logos für seine Produktreihe neugestaltet. Anstatt ihnen ein einzigartiges Design zu erlauben, verwenden sie nun die gleiche Farbpalette und geometrische Formen. Dies ist eine Form des Minimalismus, die ins Extreme getrieben wurde, und das ist nicht gut. Du opferst bereits eine Menge der feinen Details in einer Grafik oder einem Symbol, wenn du es abflachst. Wenn du keinen eindeutigen Weg findest, um zwischen Grafiken zu unterscheiden, schaffst du große Probleme für deine Besucher*innen. Das ursprüngliche flache Design kann schwer genug zu entschlüsseln sein, ohne visuelle Hinweise, die die Besucher*innen brauchen, um zu wissen, wann sie etwas anklicken müssen. Das Letzte, was du willst, ist, dass die kognitive Überlastung schlimmer wird, weil alles gleich aussieht.

Wann solltest du Flat Design verwenden?

Wie wir bereits gesehen haben, gibt es eine universelle Anziehungskraft von Flat Design. Aber es ist nicht nur eine Frage, in welcher Art von Website du es verwendest. Du kannst Flat Design bei der Erstellung der folgenden Dinge verwenden:

• Icon-Sets
• Eigene Typografie
• Mobile Navigationselemente (z. B. in Hamburger-Menüs oder Sticky Bars)
• UI-Interaktionen
• Illustrationen
• Maskottchen
• Animierte Erklärvideos
• Logos
• Infografiken
• Grafiken für soziale Medien
• Digitale Anzeigen

Insbesondere ist Flat Design nützlich bei der Erstellung von Website Wireframes sowie von Styleguides für das Web-Design.

Wie du dein Flat Design verbessern könntest

Das wichtigste zuerst: Stelle sicher, dass du Flat Design 2.0 anstelle von Flat Design verwendest. Während eine komplett flache Oberfläche für einige deiner Besucher*innen in Ordnung sein mag, wird sich die allgemeine Benutzerfreundlichkeit der Seite verbessern, wenn du den Bereichen der Seite, mit denen die Besucher*innen interagieren sollen, etwas Tiefe und Kontext hinzufügst. Eine weitere Sache, die du beachten solltest, ist, dass flaches Design nicht langweilig oder leblos bedeutet. Du kannst immer noch große oder kleine Animationen verwenden, um Feedback zu geben, die Besucher*innen während des Ladevorgangs zu unterhalten oder einfach etwas mehr Persönlichkeit und Leben in die Seite zu bringen. Sei vorsichtig mit der Farbauswahl. Obwohl kräftige Farben Teil der Flat Design Formel sind, machen sie für den Stil deiner Marke möglicherweise keinen Sinn. Stelle stattdessen sicher, dass du eine Farbpalette mit starkem Kontrast wählst. Das ist alles, was du wirklich brauchst, um bestimmte Elemente deiner Benutzeroberfläche mehr hervorzuheben als andere. Flaches Design ist nicht nur für illustrierte Websites oder Logos geeignet. Wenn wir Beispiele für Flat Design in Aktion sehen, betrachten wir normalerweise Icons, Illustrationen und andere Grafikdesign-Elemente. Flat Design und Fotografie schließen sich jedoch nicht gegenseitig aus. Du könntest beides auf einer Website verwenden, (z. B. Illustrationen vs. Fotografie).

Flaches UI-Kit

UI Kits können ein wertvolles Design-Tool sein, wenn man mit Flat Design arbeitet.

Inspirierende Beispiele für Flat Design:

Es gibt zu viele Beispiele für Flat Design im Web. Deshalb möchten wir dir im Folgenden besonders herausragende Beispiele von Unternehmen zeigen, die die Stärken von Flat Design für deine Websites und ihr Branding ausspielen.

Tripadvisor

Bei einer Website wie Tripadvisor besteht immer die Gefahr, dass die schiere Menge an Inhalten das Design überfrachtet. Ein Blick auf die Homepage zeigt jedoch, wie effektiv Flat Design ist, um den Besucher durch eine komplexe Menge an Inhalten zu führen. Abgesehen vom Logo ist der einzige Teil des „above the Fold“ Bereichs, der Farbe hat, das Heldenbild („above the Fold“ wörtlich aus dem Zeitungsdruck und Verlagswesen kommend „oberhalb des Falzes“). Und es ist der scharfe Kontrast zwischen dem farbigen Bild und der minimalistisch gestalteten Seite, der es den Besuchern ermöglicht, sich auf die primäre Aktion zu konzentrieren.

Netflix

Die Netflix-Website ist ein großartiges Beispiel für flache Icons bei der Arbeit.
Für den Anfang werden „Play“ und „More Info“ von Icons begleitet. Dies ist nicht nur eine kleine Aufmerksamkeit zum Detail, diese visuellen Hinweise sollen den Prozess der Suche nach etwas zum Anschauen beschleunigen.

Verbessere deine Website mit Flat Design

Flat Design mag seine Wurzeln in einem Designstil von vor fast 70 Jahren haben, aber es hat bewiesen, dass es im digitalen Zeitalter ein echtes Stehvermögen hat. Das liegt daran, dass sich Flat Design auf wirklich gute Design-Entscheidungen konzentriert, die unseren Nutzer*innen zugutekommen:

• Klare, offene Flächen für eine gute Übersichtlichkeit
• leuchtend bunte Markierungen für einen klaren Weg zur Konversion
• Einfache Schriftarten in Kombination mit schönen Fotos für effizientes und ansprechendes Storytelling
• Zweidimensionale Oberflächen, die eine reibungslose Reise durch deine Inhalte ermöglichen

Fazit

Wenn es dein Ziel ist, das Engagement und die Konversionsrate auf deiner Website zu erhöhen, ist das universell einsetzbare Flat Design eine großartige Möglichkeit, dies zu erreichen. Wenn du eine Website oder App gestalten möchtest, kannst du dafür Material Design verwenden.

Zusammengefasst von Nata Uchava
Von Website Freiburg

Quelle, unser Websoftware Partner Elementor Pro:
www.elementor.com/blog/what-is-material-design
www.elementor.com/blog/flat-design/