Material Design 2015

Alles Neue rund um Google's Design System

Material Design by Google

Es ist mal wieder Google I/O 2015 (Google’s Entwicklerkonferenz) gewesen und da gibt es natürlich auch Neuigkeiten zu Google’s Design Sprache: Material Design. Erst einmal hieß es Happy Birthday Material Design. Google’s Design Sprache wurde 2014 mit dem damals neuen Betriebsystem Lollipop eingeführt.

Ein Jahr später ist Material Design in Android Auto, Android Wear, Android TV und selbstversändlich auf vielen Tablets und Smartphones zu finden.

Ein gute gelaunter Matias Duarte (Google’s Vice President of Design) berrichtete, dass die Design Richtlinien bislang über 2.5 Millionen Besucher verzeichnet haben—wovon mehr als 60% wiederkehrende Besucher sind. Über 40% aller neuen Apps (seit der Vorstellung von Lollipop) sind materialisiert, wie Duarte es nennt. Sie orientieren sich also an den neuen Gestaltungsvorgaben.

Die Material Design Guidelines wurden in großem Umfang aktualisiert. Darunter ist zum Beispiel ein Update des FAB (floating action button) und eine neue Material Design Icon Bibliothek. Natürlich gibt es die Icons auch als Webfont. Ebenfalls neu sind Adaptive UI Richtlinien in Material Design und die sogenannte Device Metrics Refference.

material design metrics table

Material metrics: select a device to view detailed information, recommended material design measurements, and values for portrait and landscape orientations.

Die Material Design Guidelines und zusätzliche Dokumente sind also insgesamt recht interessant. Nach einer allgemeinen Einleitung, besteht der Hauptteil der Richtlinien aus den Abschnitten:

  1. Animation
  2. Style
  3. Layout
  4. Components
  5. Patterns
  6. Usability
  7. und einer kurzen abschließenden Zusammenfassung

Die Device Metrics Übersicht zusammen mit den in der Responsive Layouts aufgeführten Breakpoints Übersicht sollte Designern und Entwicklern einiges zum Schmökern geben.

Responsive layouts in material design adapt to any possible screen size. This adaptive UI guidance includes a flexible grid that ensures consistency across layouts, breakpoint details about how content reflows on different screens, and a description of how an app can scale from small to extra-large screens.

Für eine optimale User Experience empfiehlt Material Design für User Interfaces folgende Breakpoints: 480, 600, 840, 960, 1280, 1440, and 1600dp.

Material Design with Adaptive UI

Adaptive UI via google.com/design/spec

Material Design Farben

Material Design Farben waren schon immer sehr lebhaft und kräftig. Wie man sie richtig einsetzt empfiehlt die überarbeitete Material Design Color Specification, dort finden sich eine umfassende Farbpalette, Hinweise für UI Farben für Entwickler und sogenannte Themes.

Themes let you apply a consistent tone to an app. The theme specifies the darkness of the surfaces, level of shadow, and appropriate opacity of ink elements. To promote greater consistency between apps, light and dark themes are available to choose from.

Es gibt keine falschen Farben. Nur falsche Kombinationen.

Material Design Award Winners

Um zu betonen wie ernst es Google mit seinen Material Design Vorgaben meint, hat Google eine Auszeichnung ins Leben gerufen: den Material Design Award. Material Design Award Gewinner sind 2015:

  1. Pocket
  2. B&H Photo Video Audio Pro
  3. The New York Times
  4. Pocket Casts
  5. Weather Timeline
  6. Tumblr

Das Material Design Team von Google hat im Play Store eine eigene Seite einrichten lassen, auf der alle Preisträger und weitere Apps zu finden sind: g.co/materialshowcase

Zusätzlich zu den Material Design Guidelines wurde auch die gesamte google.com/design Startseite überarbeitet und mit neuen Inhalten befüllt. Dort finden sich auch noch mal alle wichtigen Dokumente übersichtlich aufgelistet.

About Jan (501 Articles)
<p>Informationsarchitekt und Konferenz-Veranstalter (IA Konferenz, die Konzepter-Konferenz: http://iakonferenz.org, MOBX Mobile UX Konferenz: http://mobxcon.com), Podcaster und Twitter Addict. Geboren in Prag, sesshaft in Berlin.</p>

1 Trackbacks & Pingbacks

  1. Toast Meldungen - DESIGNBRIEF

Leave a comment

Your email address will not be published.


*


css.php