Wie du mit Googles Material Design dein Blog herausputzt 🔰

Lesezeit: 8 Minuten

Als ich Googles Material Design das erste Mal sah, fürchtete ich noch um mein Augenlicht. Zu grell, zu bunt war das, was mir da präsentiert wurde. Doch der erste Eindruck täuschte. Auf die Farben kommt es in Wahrheit gar nicht an, es ist das Konzept dahinter, das fasziniert.

Vorgestellt wurde Material Design bereits Ende 2014. Seitdem bahnt es sich seinen Weg durch eine schöne neue Handywelt und löst eine App nach der anderen ab. Einiges davon lässt sich lohnend auf das Design von Blogs und Websites übertragen.

Kaum war dieser Artikel geschrieben, brachte Google MDL heraus. Material Design Lite. Das Design kommt vom Android Handy ins Web. Genau das, worum es in diesem Artikel geht. Mit MDL wird die Sache jetzt noch spannender und einfacher.

Bereite dich vor auf ein Design, das ins Auge fällt. Ein Design, über das man streiten kann. Ein Design, das durch Farbenfrohsinn, Klarheit und Flächen besticht. Dazu kommen Animationen und Schatten, um das Design lebendiger zu machen.

Material Design wurde für Android Apps, also für Handys und Tablets entwickelt. Ein Thema, dass mich hier gar nicht interessiert. Allerdings lassen sich Elemente des Material Design als Inspiration auch für Blogs und Webseiten übernehmen. Warum auch nicht? So kriegt man frischen Wind und vor allem Farbe ins Blog. Das würde man sich ansonsten vielleicht gar nicht trauen.

Material Design ist mehr als ein erweiterter Styleguide. Die Idee hinter dem Look verspricht uns tolles Design, klare Formen kombiniert mit dem, was heutzutage technisch machbar ist. Getreu dem Motto „Man sollte seinem eigenen Geschmack immer voraus sein“ … Wir lernen noch, es zu mögen.

Außerdem profitiert man von den zur Verfügung stehenden Ressourcen. Alles ist bestens dokumentiert und bis ins Detail ausgearbeitet. Ein weiteres Argument: Der Look wird immer mehr Menschen vertraut sein, da scheint es nicht verkehrt ihnen auf die gleiche Weise entgegenzutreten. Zudem gilt Material Design als modern und unverbraucht. Genau das suchen wird doch.

Man kann nicht alles übernehmen. Blogs funktionieren nicht wie Handys. Es ist auch nur eingeschränkt sinnvoll Seiten für das WWW mit Animationen zum Selbstzweck zuzupflastert – davon haben wir schon genug. Was aber uneingeschränkt zur Verfügung steht, sind Farben, ein Font und Icons. So nähern sich die Welten einander an. Übrigens, auch schwarze oder schwarz-weiße Material Designs sind möglich und kommen unter Android vor.

Material Design Fonts

Android verwendet praktischerweise genau einen Font. Er heißt Roboto  – passend zum bekannten Android Roboter. Dazu kommt Noto, das uns – gedacht für die asiatische Welt – nicht weiter interessieren muss. Roboto ist nicht zufällig Teil der Google Fonts und darf als Open Source frei verwendet werden.

Roboto wurde für das Material Design noch einmal überarbeitet. Den Font gibt es von Thin bis Ultra-Bold in 12 Schnitten. Als da wären 100, 300, 400, 500, 700, 900 und das Gleiche noch mal in der kursiven Variante.

Material Design Farben

Auch die Farbe betreffend gibt es von Google genaue Vorgaben. Die Liste der zur Verwendung freigegebenen Farben ist klar definiert. App oder nicht, es geht auch was im WWW. Und da eigentlich sogar noch besser. Denn wo mehr Platz ist, da können Farben und Elemente prächtiger zur Geltung kommen. Ganz bestimmt sogar, wenn sie so bunt sind wie Google es uns hier ans Herz legt. Eine Farbpalette für Illustrator und Photoshop steht zur Verfügung.

Praktisch ist der nicht von Google stammende Palettengenerator, mit dem man sich selbst mühelos etwas Passendes zusammenklicken kann. Oder der Material Mixer.

Während dem Android Designer Vorgaben gemacht werden, kann der Blogger oder Webdesigner gestalten, wie er lustig ist. Oder sagen wir, er kann machen, was er will, solange das Publikum ihm folgt.

Hier noch typische Farbpaletten – wer möchte …

[toggle title=“Farbpaletten Beispiele auf- und zuklappen“]

[/toggle]

Material Design Icons

Icons spielen im Material Design eine wichtige Rolle. Angenehm ist, dass sämtliche Icons kostenlos zum Download zur Verfügung stehen. Es ist eine pralle Sammlung, die es auch als Web Font gibt. Einzeln kann man die Icons zum Beispiel bei MaterialUp herunterladen. Oder diese Material Icons. Auch ein WordPress Plugin Material Design Icons wurde dafür schon geschrieben. So bekommt man die schicken Icons am leichtesten in die eigene Story.

Die Originale existieren als transparente PNGs, das perfekte Format, und zwar sowohl in Weiß als auch in Schwarz. Hier sechs davon in der 96 Pixel Variante.

Material Design verwendet einen „Paper Shadow“, ist also kein Flat-Design, wie es zurzeit modern ist. Der Schatten soll wirken wie bei einem Blatt Papier, das auf einer hellen Oberfläche liegt. Es ist ein leichter 3-D-Effekt – als CSS zum Beispiel hier zu finden.

Material Design leitet sich aus der altbekannten Welt ab. Beispielhaft erläutert mit dem Gmail-Icon. Es erinnert mit seinen Beleuchtungseffekten nicht zufällig an einen herkömmlichen Briefumschlag.

Abgesehen von Googles offiziellem Iconset haben Grafiker begonnen ihre eigenen Vorstellungen umzusetzen. Sie lassen sich dabei vom Original anregen. Ob und inwieweit dies dann noch echten Material Design entspricht, sei dahingestellt. Da Google Ihnen und mir als Blogger, Webdesigner oder Seitenbetreiber nichts vorschreiben kann, haben wir die Auswahl.

Hier ist ein Set von Muhammad Yasir aus Dubai. Das herunterladbare Original ist eine Photoshop Datei. Einzelbilder stehen nicht zur Verfügung.

Material Design Animation

Bewegung spielt eine große Rolle. Handys vollführen eine Reihe von Animationen, die sich allerdings nicht auf die Schnelle in einem Blog nachbauen lassen. Man braucht Scripts dazu. Die gibt es. Man findet sie in Polymer. An dieser Stelle winkt der interessierte Laie jedoch ab.

Glücklicherweise gibt auch hier ein Plugin. Leider habe ich Polymer for WordPress nicht bedienen können. Mir fehlt eine Gebrauchsanweisung. Ganz so simpel ist das alles ja nicht. [highlight]Vielleicht kann jemand helfen? Wer kennt sich aus?[/highlight]

• Polymer’s Material Design Playground Demo
• Animationen in Aktion
• Button Demoseite
• Demoseite für den Ripple Effekt
• Material Foundation bei Github

Unter dem Stichwort Polycasts finden sich reichlich von Google produzierte Videos bei Youtube. English only.

PSD UI Kits zum Download

Grafische Elemente und Vorlagen für Photoshop-Künstler.

• Material Design UI Kit
• Mobile & UI: Android L 5.0 UI Kit

Cards

Inhalte werden auf sogenannten Cards präsentiert. Ich glaube, man darf durchaus „Kärtchen“ sagen, auch wenn sich das nie durchsetzen wird. Es gibt verschiedene davon je nach Inhalt. Es wäre möglich, auch den Inhalt eines Blogs auf diese Weise zu präsentieren. Der PR-Blogger macht übrigens ziemlich genau das auf seiner Startseite. Listen oder Galerien sollen auf diese Weise nicht gezeigt werden, sagt Google.

Material Design kennt übrigens auch Launch Screens. Das ist nicht anderes als der gute alte Splash Screen (Startbild) aus der süßsauren Flash Zeit. Die braucht man wieder, weil einige Apps wohl längere Ladezeiten aufweisen. Man muss das fürs Web aber nicht nachmachen.

Frameworks

Webdesigner verwenden Frameworks, um nicht ständig alles neu erfinden zu müssen beim Seitenbau. Frameworks gibt es für das Material Design längst auch. Als da wären:

• Material Kit
• Material Design Lite von Google
• Angular Material
• Bootstrap Material
• Ionic
• LumX
• Materialize | Tutorial dazu
• MUI CSS Framework
• nt1m Material Framework

WordPress Themes

Auch hier hat inzwischen manches das Licht der digitalen Welt erblickt. Allerdings ist nicht alles, was sich aufmerksamkeitsheischend das Etikett anheftet auch wirkliches Material Design. Es genügt nicht, ein paar Icons zu verbauen und das Ganze dann bunt anzumalen. Auch der Geist muss vorhanden sein. Darüber hinaus stellt sich die Frage, ob es sinnvoll ist für ein Design auf die Vorteile bewährter Themes zu verzichtet. Aber sieh selbst.

• Material Design Theme – Blog
• Material Gaze – von Marty Helmick, gratis
• Material WP
• Rare vom Themeforest
• Material Press – Bausatz auf Github
• Theme vom Templatemonster

Websites in freier Wildbahn

Schade, aber viel habe ich nicht gefunden. Dabei bin ich sicher, da draußen gibt es mehr als nur seachs gelungene Material Designs auf Websites und Blogs.

• Neues Ufer – Wohnen am Phönixsee
• Android TO
• Anderswwwo
• João Piedade
• Nimbus Nine
• Google GMail Inbox

Hintergrundbilder

• Einen dicken Stapel aus Hintergrundbildern nicht nur fürs Handy enthält diese Kollektion bei Google+
• Material Design Hintergrundbilder von Oxygenna
• 4k Wallpaper bei Deviantart

Googles Ratschläge für den Einsatz von Bildern

Diese Hinweise können allgemein verstanden werden. Bei der Verwendung von Illustration und Fotos soll man, um die Benutzerfreundlichkeit zu verbessern, solche Bilder wählen, die Relevanz, Informationen und Freude zum Ausdruck bringen.

• Schätze den Kontext
• Sei eindringlich
• Halte dich von Stockfotos fern
• Habe einen Schwerpunkt
• Baue Geschichten ein

Weiterführende Links zum Thema

• In Vogue: 9 Material Design Frameworks for Cutting-Edge Websites
• Google’s material design explained: Continuity of experience
• Material Design as Fast As Possible – Video
• Making Material Design – Video
• What Google missed in their guidelines for Material Design iconography
• Material.io

Kennst du ein gelungenes Blog im Material Design Stil?

Dieser Artikel wurde im Juli 0015 in englischer Übersetzung mit Veränderungen auch im Smashing Magazin veröffentlicht.