website mockup

9 Grundsätze im Materialdesign

  • 6 min read

Rating

Materialdesign ist eine von Google im Sommer 2014 erstellte Designsprache. Sie wurde speziell für Android entwickelt, um eine bessere Grundlage für Benutzeroberflächen zu schaffen. Dafür ahmt sie reale Objekte mit ihren Merkmalen und natürlichen Bewegungen nach.

Obwohl es sich in erster Linie auf das touchbasierte App-Design konzentriert, ist es auch im Webdesign hilfreich. In diesem Artikel werden einige der wichtigsten Prinzipien des Materialdesigns und die Auswirkungen auf den Designprozess der Benutzeroberfläche behandelt.

Was ist Materialdesign?

Materialdesign mit dem Codenamen „Quantum Paper“ ist ein Projekt von Google, dessen Ziel es ist, auf allen Plattformen eine gleichbleibend hohe Ausgabequalität zu erhalten. Klare Hinweise und ansprechend aussehende Komponenten, die sich wie reale Objekte verhalten, verbessern das Erlebnis. Im Gegensatz zur Darstellung kulturrelevanter Gegenstände im Skeuomorphismus, wendet Materialdesign grundlegende Naturgesetze der physischen Welt in Bezug auf Beleuchtung und Bewegung an.


Im Gegensatz zu echtem Papier kann unser digitales Material intelligent erweitert und umgestaltet werden. Material hat physikalische Oberflächen und Kanten. Nähte und Schatten geben Auskunft darüber, was Sie anfassen können.” 

— Matias Duarte, VP Materialdesign bei Google

Durch die sorgfältige Berücksichtigung von Layout, visueller Sprache und Mustersammlungen wird die kognitive Belastung des Benutzers in der physischen Welt verringert. Auf diese Weise wird die Vorhersagbarkeit maximiert und Unklarheiten beseitigt.

Werfen wir einen Blick darauf, wie Google Materialdesign und dessen Prinzipien erklärt.


Material ist die Metapher

Materialdesign ist inspiriert von der physischen Welt. Texturen, Licht und Schatten sind die Kernelemente dieser Designsprache. Die materielle Metapher ist die vereinheitlichende Theorie eines rationalisierten Raumes und eines Bewegungssystems. Es ist inspiriert von den Medien Papier und Tinte, aber trotzdem offen für Fantasie und Magie.



Material ist Metapher


Intuitive und natürliche Oberflächen

Oberflächen und Kanten lösen visuelle Signale aus, die auf unseren Erfahrungen der Realität beruhen. Die kognitive Belastung wird durch die Verwendung vertrauter Attribute, die unser Gehirn schnell verstehen kann, verringert. Visuelle Elemente haben vertraute Eigenschaften, die wir unterbewusst wahrnehmen, leicht verstehen und verarbeiten können.



Intuitive und natürliche Oberflächen


Dimensionalität ermöglicht Interaktion

Das Materialdesign folgt den Gesetzen der Physik. Bei Interaktion zwischen Objekten sind die Grundlagen von Licht, Oberfläche und Bewegung von entscheidender Bedeutung. Eine realistische Beleuchtung suggeriert Nähte, unterteilt den Raum und hebt bewegliche Teile hervor.


Dimension ermöglichen Interaktion


Ein adaptives Design

Ein einziges grundlegendes Gestaltungssystem bestimmt Interaktionen und Raum. Jedes Gerät spiegelt eine andere Ansicht desselben zugrunde liegenden Systems wider. Diese Designsprache bietet eine Ansicht der Größe und der Interaktion, die für das jeweilige Gerät geeignet sind. Während sich die Abmessungen für jedes Gerät unterscheiden, bleiben Farben, Ikonografie, Hierarchie und räumliche Beziehungen konstant.

Ein adaptives Design


Der Inhalt ist fett, grafisch und bewusst

Dieses Prinzip basiert auf den Grundlagen der Druckgestaltung. So können Sie Hierarchien zwischen Elementen herstellen. Sie können Bedeutung zuweisen und bestimmte Elemente hervorheben. Mit einer bewussten Farbauswahl und randlosen Bildern können Ihre Inhalte fett und grafisch darstellen. Nach diesem Prinzip wird auch die großformatige Typografie angewendet. Mit bewusstem Whitespace können Sie bestimmte Elemente hervorheben, die im Mittelpunkt der Benutzerinteraktionen stehen sollen.

 

Fetter und grafischer Inhalt


Farbe, Oberfläche und Ikongraphie betonen Interaktionen

Mit einer bestimmten Ikonografie können Sie ausgewählte Interaktionen hervorheben. Primäre Interaktionen sind Wendepunkte, die das gesamte Design verändern. Ihre Betonung macht die Kernfunktion sofort sichtbar und navigiert den Benutzer.


Aktionen hervorheben


Benutzer initiieren die Änderung

Änderungen in der Benutzeroberfläche werden durch Benutzerinteraktionen angestoßen. Eine Bewegung, die auf Berührung reagiert, respektiert und stärkt den Benutzer als Navigator.



Der Benutzer initiiert die Änderung


Animationschoreografie

Alle Mikrointeraktionen im Interface werden in einer einzigen Umgebung zusammengeführt. Objekte werden dem Benutzer präsentiert, ohne die Kontinuität der Erfahrung zu unterbrechen, selbst wenn sie sich transformieren und neu organisieren. Mit subtilen Animationen können Sie das unterstützen.


Animationchoreografie

Sinnvolle Bewegung

Bewegung und Animationen sind sinnvoll und angemessen. Sie dienen zur Fokussierung der Aufmerksamkeit und zur Aufrechterhaltung der Kontinuität. Das Feedback zu den Benutzeraktionen ist subtil und dennoch klar. Übergänge zwischen Elementen oder Bildschirmen sind effizient, aber kohärent.

Sinnvolle Bewegung

Fazit

Vereinfacht gesagt, dreht sich beim Materialdesign alles um Details. Mit ein wenig Realismus können Sie die Funktionalität und das Ziel Ihres Designs zum Ausdruck bringen. Aber seien Sie vorsichtig, vereinfachen Sie nicht zu stark. Bei allfälligen Fragen zu Materialdesign stehen wir Ihnen gerne zur Verfügung.

Kontaktiere Uns

  • Dieses Feld dient zur Validierung und sollte nicht verändert werden.

Wie hilfreich war dieser Beitrag?

Klicken Sie auf einen Stern für Ihre Bewertung!

Durchschnittliche Bewertung / 5. Anzahl Bewertungen:

Teilen

Abonnieren Sie unseren Newsletter

Weitere ähnliche Artikel