9 Grundsätze im Materialdesign

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.

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.

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.

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.

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.

 

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.

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.

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.

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.

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.