Begriffserklärung: "Material Design"

Material Design ist eine Erscheinung, die eine kurze Einführungsgeschichte benötigt. Warum? Weil es mit einer Einführungsgeschichte auf den Markt kam.

(firmenpresse) - Die meisten Design-Trends im Web entwickeln sich nach und nach, ähnlich wie Wasser sich langsam in einem unterirdischen Strom ansammelt. Erst wenn ein solcher Strom an einer sichtbaren Quelle hervortritt, bekommt er einen Namen und wird bekannt. Über den Namen wird dann allerdings nicht mehr groß gesprochen. Was organisch entsteht, braucht keine großen Erklärungen.

Die Definition von Flat Design wird im Vergleich zu skeumorphischem Design in der Web-Entwicklung sehr deutlich. Nicht so beim Material Design, seine Einzelelemente sind optisch schwieriger vom Flat Design zu unterscheiden. Manche sagen sogar, dass es beim Material Design mehr um eine Designphilosophie geht als um optische Merkmale.

Material Design wurde 2014 von Google vorgestellt, samt Namen, Werkzeugkasten und Bedienungsanleitung, alles auf einmal. Eine neue Designsprache war geboren. Seit seiner "Geburt" schreiben hunderte Autoren darüber, wie und warum Material Design ein berechtigter Nachfolger vom Flat Design ist. Oder ist er es doch nicht? Mal ehrlich, das wird sich erst nach einiger Zeit zeigen. Der von Google angebotene Vergleich mit einer universellen Sprache stimmt nachdenklich. Da war mal dieses "Esperanto". Eine großartige Idee. Eine neue Sprache, die alle Schwierigkeiten beseitigen sollte, die durch alte, unlogische und oft unnötig komplizierte Sprachen entstanden sind. Nur, die Unlogischen und Komplizierten haben sich nicht verdrängen lassen und sind heute lebendiger denn je.

Es heißt also abwarten und schauen, wie Material Design sich am besten einsetzen lässt. In der Zwischenzeit gibt es bei der Umsetzung dieser Designsprache ein paar Punkte, die man unbedingt beachten sollte, besonders in Bezug auf responsives Design und seine Hauptprinzipien. Diese Punkte haben wir für Sie aufgelistet.

1. Prinzip "Material"

Material Design sollte die digitale Grafik mit einer betonten Stofflichkeit anreichern. Nicht umsonst hat Carl Kleiner, der Designer des Wallpapers für Android Lollipop, seine Ideen mit farbigem Papier und Skalpell erarbeitet. Die Papierelemente können mit anderen Elementen aus Bibliotheken gefüllt werden und auf diese Weise entsteht eine Material Design Card. Nur lässt sich die materielle Stofflichkeit nicht ohne Weiteres auf jedem Display präsentieren. Die Richtlinien für responsive Layouts im Material Design beschreiben 6 verschiedene Muster, wie die Breite von Designelementen auf die Änderung der Displaygröße reagiert und 3 weitere Muster, wie die Sichtbarkeit derselben die Elemente ändern könnte. Um sicherzustellen, dass die Elemente letztendlich Ihre gewünschte Design-Idee getreu wiedergeben, sollte man sie in jedem Fall auf echten Endgeräten testen.



2. Prinzip "Bewegung"

Bewegungen und Animationen spielen für das UX im Material Design eine zentrale Rolle. Die Elemente von Material Design können unabhängig voneinander überlagert, animiert und mit Schatten versehen werden. Das bringt Bewegung. Wiederum bieten die Google Richtlinien verschiedene Möglichkeiten, wie die Elemente gezeigt oder versteckt werden können. Dabei sind alle UX Design Elemente wie Cards, Buttons, Listen und Formulare mit den vertrauten Animationen wie dem "Ripple Effekt" versehen. Die Animationen werden durch den Klick auf einen Button ausgelöst und die Prinzipien der Bewegungen folgen bekannten physikalischen Gesetzen. Das garantiert ein gutes visuelles Feedback für den Nutzer. Auch das muss auf echten Endgeräten getestet werden, damit die Bewegungsabläufe einheitlich bleiben und dem Kontext gut angepasst sind. Wer das Prinzip "Bewegung" konsequent umsetzt, muss seine App auch konsequent testen.

3. Prinzip des print-basierten Designs

Material Design setzt auf klassische Gestaltungsregeln und Elemente des Grafik-Designs. Genauso wie Flat Design, benutzt das Material Design viele Icons und Schriftarten. Das sichert hohe Wiedererkennungswerte für die tragenden Design-Elemente. Zusätzlich verfügt aber jedes Design-Element über einen Tiefenparameter. Das hilft, die Interface-Elemente nach den Ebenen zu strukturieren, die Elemente bekommen eine klare Hierarchie und Definition. Auch hier kommen die Richtlinien für responsives Design zur Verwendung und bestimmen, welche Ebene auf welchen Display-Größen sichtbar wird. Google Richtlinien bieten Anweisungen für über 10 Display-Größen. Dabei basieren die Anweisungen auf Google Chrome Browser. Selbstverständlich muss man das fertige Design auch auf verschiedenen anderen Browsern testen.

Beim Erschaffen des Material Designs verfolgte Google das Ziel, das Design von Websites und Apps über alle Endgeräte hinweg zu vereinheitlichen. Es gibt aber sehr viele Endgeräte. Dazu gibt es noch die 5 am meisten benutzten Browser und verschiedene Betriebssysteme. Dazu noch die Tatsache, dass nicht alle Nutzer die letzte Version des Betriebssystems haben werden, was besonders auf Windows-Nutzer zutrifft.

Sie werden feststellen, dass das einheitliche Erlebnis nur mit vielen Tests möglich wird. Damit eine Material Design Card mitsamt ihrer Elevation und Animation auf allen Geräten korrektes Verhalten vorweist, muss man dieses Verhalten vorher korrekt testen. Es stimmt, dass alle Elemente des Material Designs auf Responsives Design ausgerichtet sind. Aber so gut die Google Design Richtlinien auch sein mögen, das Testen und Korrigieren können sie nicht verhindern.

Besuchen Sie uns für weitere Informationen unter www.united-coding.com.

Weitere Infos zu dieser Pressemeldung:

Themen in dieser Pressemitteilung:


Unternehmensinformation / Kurzprofil:
Leseranfragen:
PresseKontakt / Agentur:
Bereitgestellt von Benutzer: Connektar
Datum: 02.07.2018 - 14:30 Uhr
Sprache: Deutsch
News-ID 1626823
Anzahl Zeichen: 5845

Kontakt-Informationen:
Ansprechpartner: Arthur Hipke
Stadt:

Koblenz

Telefon: +49 261 96098930

Kategorie:

IT & Hardware & Software & TK

Meldungsart:
Anmerkungen:


Diese Pressemitteilung wurde bisher 862 mal aufgerufen.

Die United Coding GmbH & Co. KG stellt sich vor ...
Hauptsächlich unterstützen wir KMUs aus den verschiedensten Branchen, indem wir Kapazitäten aus unserem über 90-köpfigen IT-Expertenteam für alle erdenklichen Technologien bereitstellen, wenn kundenseitig Engpässe im Projektgeschäft auftreten. Unsere 10-jährige Erfahrung zeigt uns, dass

Gewachsene Strukturen als Bremse für die digitale Transformation in Unternehmen ...
Genau hier kommt das Thema "Digitale Transformation" wie gerufen. Prozesse können digitalisiert, automatisiert und dadurch optimiert werden. Was Menschen vorher mühevoll von Hand machen mussten, erledigen Programme heute rund um die Uhr in x-facher Geschwindigkeit. Skalierbarkeit ist dam

Wie künstliche Intelligenz Ihre Geschäftsprozesse optimiert - Teil 2 ...
Das Interessante an diesen kurzen Ausblicken ist, dass nahezu alle von den technischen Möglichkeiten heute umsetzbar sind. Einige davon kommen gezielt in Unternehmen zum Einsatz. In diesem Beitrag zeichnen wir ein KI-Szenario, welches für alle Logistik-Unternehmen, wie Online- und Offline-Vers

Weitere Mitteilungen von United Coding GmbH & Co. KG

Warum strukturierte Business-Netzwerke wie help.swiss für KI-Systeme wichtiger werden ...
Die digitale Sichtbarkeit von Unternehmen verändert sich derzeit grundlegend. Moderne KI-Systeme und Suchmaschinen analysieren heute nicht mehr nur einzelne Webseiten, sondern zunehmend ganze Themenbereiche, Datenstrukturen und vernetzte Informationsquellen. Dadurch gewinnen strukturierte Busine

Kinosound im Wohnzimmer: KINOFANS klärt auf, wann sich Dolby Atmos zu Hause wirklich lohnt ...
Düsseldorf, 06. Mai 2026 - Ein Logo macht noch keinen Kinosound: Dolby Atmos verspricht das ultimative Klangerlebnis, doch in der Praxis scheitern viele Heimkino-Setups an der Umsetzung. Das Filmportal KINOFANS veröffentlicht heute einen detaillierten Ratgeber, der zeigt, warum Hardware, Raumakust

World of Data 2026: MarTech-Fokus zeigt, wie AI, Daten und integrierte Plattformen Marketing wirksamer machen ...
München, 13. Mai 2026 - Mehr Kanäle, mehr Content, mehr Daten, aber weniger Zeit: Marketing steht 2026 unter Druck. Viele Teams reagieren mit immer neuen Tools. Der World of Data (WoD) am 11. Juni 2026 in München setzt hier anders an: Die These lautet, dass MarTech seinen Wert erst dann voll entf

Hermes Reply präsentiert "Brick Cognitive", ein agentenbasiertes Betriebssystem für die Fertigung ...
Hermes Reply, das auf digitale Transformation in der Fertigungsindustrie spezialisierte Unternehmen der Reply Gruppe, stellt "Brick Cognitive" vor: das agentenbasierte Betriebssystem integriert Künstliche Intelligenz direkt in industrielle Abläufe. Die Lösung erweitert die Next-Generati

HOPPE bietet eine digitale Inventarverwaltung, um Inventar nachvollziehbar zu verwalten ...
Die Vorteile der HOPPE Inventarsoftware für Unternehmen In vielen Unternehmen ist die Inventarverwaltung noch immer mit Excel-Listen, Papierdokumenten oder unübersichtlichen Tabellen organisiert. Das führt häufig zu Fehlern, unnötigem Aufwand und fehlender Transparenz. Die HOPPE Inventarsoft

NIS-2 trifft Lieferkette: Warum der Einkauf zur Compliance-Schwachstelle wird ...
Während die IT-Abteilungen deutscher Unternehmen unter Hochdruck an der Umsetzung der NIS-2-Richtlinie arbeiten, droht an anderer Stelle eine gefährliche Flanke offen zu bleiben: die Lieferkette. Aktuelle Beobachtungen aus der Prüfpraxis zeigen, dass viele Unternehmen ihre Lieferantenprüfung noc

KI gegen störende Reflexionen in Videodaten ...
Hamburg, 12.05.2026 In der Film-, Werbe- und VFX-Produktion entstehen z.B. auf lackierten Fahrzeugoberflächen, Glasfassaden oder glänzenden Baustoffen, Reflexionen, die einen hohen manuellen Nachbearbeitungsaufwand verursachen. Ziel des Innovationsprojekts "ReflectionAI" ist die Entwi

Wenn neue Kunden ausbleiben, wird die Website zum entscheidenden Faktor ...
Berlin - Viele Unternehmen spüren derzeit die wirtschaftliche Zurückhaltung im Markt deutlich. Kaufentscheidungen dauern länger, Interessenten vergleichen intensiver und neue Kunden zu gewinnen wird für viele Firmen spürbar schwieriger als noch vor wenigen Jahren. Gerade in wirtschaftlich un

Software Architecture Gathering 2026 - Call for Papers jetzt geöffnet ...
Die nächste Ausgabe des Software Architecture Gathering (SAG) findet vom 16. bis 19. November 2026 in Berlin statt. Veranstaltet vom iSAQB® in Kooperation mit heise conferences, bringt das Event die internationale Softwarearchitektur-Community zusammen und dient als Plattform für Wissensaustausch

Responsive Webdesign als Erfolgsfaktor für Unternehmen im Main-Kinzig-Kreis ...
Immer mehr Menschen nutzen vor allem Smartphones, um auf Unternehmenswebsites zuzugreifen. Eine optimale Darstellung auf allen Endgeräten ist daher längst kein Zusatz mehr, sondern ein entscheidender Erfolgsfaktor. Responsive Webdesign sorgt dafür, dass Websites auf jedem Bildschirm benutzerfreun