Direkt zum Hauptbereich

Material Design - Wie gestaltet man Webseiten?

Material Design ist ein Buzzword, das seinen Anfang bei Google nahm. Google will damit Webdesignern eine/ihre Designsprache näherbringen, die nicht nur bei der Gestaltung von Webseiten, sondern auch bei Android-Apps, dienlich sein soll.
Dem Material Design steht das sog. Flat Design gegenüber. Beiden Ansätzen ist gemein, dass sie auf grosse Bilder, Icons, Schriften sowie grossflächige Design-Elemente setzen.



Screenshot von design.goole.com
Im Gegensatz zu Flat Design setzt Material Design auf Funktionalität, weniger auf Ästhetik. Ziel ist es, die Interaktion zwischen Anwendung und Benutzer zu erleichtern.

Google's Webseite zum Thema ist wirklich gründlich und vermittelt Erkenntnisse in aller Tiefe. Ein Besuch für Design-Interessierte lohnt sich auf alle Fälle.

Hier ein paar zusammenfassende Themen als Teaser um was es geht.


Wo Licht ist, ist auch Schatten
Die Szenerie einer Webseite oder eines Smartphone-Screens wird wie auf einer Bühne ins beste Licht gerückt und jeder Gegenstand angestrahlt. "Ambient lights" werfen einen weichen Schatten an alle Kanten,  "Directional light" geniert einen Schatten in eine Richtung.

3D wo 2D ist

Auf den Screens soll dem Benutzer der Eindruck vermittelt werden, dass sich alles im Raum abspielt und dass Tiefgang hergestellt wird. So werden Gegenstände auf einer x-, y- und einer z-Achse dargestellt. 2-D-Gegenstände werfen eben dann Schatten auf den darunterliegenden Gegenstand oder den Untergrund, resp. Hintergrund.

Bewegung wird simuliert


Design erträgt Übertreibung schlecht. So gilt "Umblättern" als unerwünscht. Bewegung wird durch Interpolation erzeugt.

Material Motion zeigt wie eine App organisiert ist und was sie tun kann. Bewegung fokussiert auf verschiedene Ansichten, weisst darauf hin, was geschieht, wenn ein Nutzer die Geste abgeschlossen hat. Sie schafft eine Hierarchie und Beziehung zwischen den Elementen.

Kontinuität


Kontinuität ist ein gebot von Material Design. So soll jede Bewegung aauf dem Bildschirm logisch nachvollziehbar sein und nicht bloss der Ästhetik dienen. Zum Beispiel dient der "Inkdrop"-Effekt dem Nutzer anzuzeigen, dass er und wo er auf eine bestimmte Stelle geklickt hat. Davon ausgehend weiter sich ein Overlay radial aus.


Zusammenfassend lässt sich sagen, dass Material Design eine Grundlage bietet, die konsequent angewendet zu optisch sehr ansprechenden Screen-Gestaltungen führt und ein Hilfsmittel ist, um die Benutzerführung zu vereinheitlichen und somit für den Nutzer zu vereinfachen.





Video zum Thema Making Material Design: 
Crafting Material


Hier noch interessante Links zu konsequent angewandtem Material Design Webseiten:

Material Up

- Material Design Lite
- Material Interaction
- Material Ui

Kommentare

Beliebte Posts aus diesem Blog

Customer Journey - Mehr als ein Buzzword im Online Marketing

Die Customer Journey beschreibt den Prozess, den der Kunde vom Kaufimpuls bis hin zum Kaufabschluss - und wohl auch darüber hinaus - entlang den Kontaktpunkten des Anbieters, dem Brand, und dessen Produkten und Dienstleistungen durchschreitet.

Wie folgende Darstellung klar macht, steckt hinter dem Begriff eine ungeahnte Komplexität. Die Anforderung an die Unternehmen ist erdenklich hoch und verlangt eine Prozessorganisation.

Bitter vielleicht der Hinweis, dass je schmerz- und reibungsloser der Kunde den ganzen Prozess erlebt, desto perfekter ist im Hintergrund die Customer Journey organisiert.









































Als Hauptbegriffe des Customer Journeys tauchen folgende Worte auf:

Awarness = Ausmerksamkeit
Consideration = Abwägung
Intent = Absicht
Purchase = Kauf
Support
Loyality = Treue
Advocacy = Fürsprache

Wie so oft, werden Begriffe und Buzzwords mehrfach interpretiert und umdefiniert. Entscheidend ist zu verstehen, dass mit Customer Journey jede Phase betrifft während der ein Kunde mit einer Unternehmun…

PostAuto AG PubliBike AG - So lanciert man kein neues Produkt

Fast den ganzen langen Sommer 2018 kam PubliBike AG nicht aus den Schalgzeilen. Grund waren die offensichtlich leicht mit einem Smartphone zu knackenden Schlösser der eBikes der PostAuto AG. Waren es zuerst vorallem in Bern zahlreiche Fahrräderschlösser, die genackt wurden, folgten auch entsprechende Meldungen aus Zürich. PubliBike musste die ganze Flotte zur Nachrüstung einziehen und die Lancierung verschieben. Nicht gerade ein vertrauensfördernder Vorgang. Betrifft es nicht das eBike selber, so stellt sich die Frage, ob der Anbieter das Geschäft, sprich die Fahrzeugtechnik im Griff hat oder ob auch da Mängel auftreten werden? Keine günstige Ausgangslage, dass die Mietvelos auch sofort rege genützt werden.
Sicher haben die Produktverantwortlichen nicht die Absicht gehabt, PubliBike erst im Herbst zu lancieren, wenn es bisher auch ein wirklich verlängerter Sommer ist. (By the way:bei der Abfassung dieses Posts zeigte das Thermometer um 16:20 h 27° C an.) Möglicherweise wäre es klüger …

Digital Storyboard - Das Drehbuch

Wozu braucht es ein Drehbuch? 1.Wie es fast immer in beruflichen Bereichen einen Plan braucht, braucht eine gute Geschichte ein Drehbuch.2.Ein Drehbuch hat seine eigene Entstehungsgeschichte.Es entsteht in einem Prozess lange bevor es dann auch umgesetzt wird.3.Im Drehbuch wird nicht bloss eine Geschichte geschrieben, sondern auch die Anweisung, wie die Geschichte inszeniert werden soll in Bezug auf alle Faktoren und Facetten die eine Geschichte schliesslich ausmacht. Nachdem wir nun vor Augen haben, wie eine Geschichte ihren Anfang nimmt, beschäftigen wir uns mit der Methode wie man das Gerüst verkleidet und das Haus mit Leben füllt. Dazu dient uns die Methodik des Drehbuches. Angelehnt an die lange Tradition des Filmemachens vertrauen wir auf die Prozesse bei der Entstehung einesFilmdrehbuches. Peter Hant hielt in seinem Werk „Das Drehbuch“ fest, dass in einem eigentlichen Drehbuch nur beschrieben wird, was zu sehen und zu hören ist. Gedanken oder Absichten haben in einem Drehbuch kei…