Frameworks und Libraries vorgestellt

Material Design 2017: CSS-, HTML5- und iOS-Adaptionen
Kommentare

Die Welt des Material Designs steht nicht still: Bei Google folgen die Material Components auf das Material Design Lite und auch darüber hinaus gibt es einige Neuigkeiten in Sachen Frameworks und Libraries zu berichten.

Material Design ist als Designsprache längt auch auf iOS angekommen. Auch Microsoft hat ein dem Material Design ähnliches Design System vorgestellt. Bereits 2015 haben wir euch das Material Design Lite sowie 14 Frameworks für Googles Design-Standard vorgestellt – viele davon sind noch immer eine gute Wahl, so beispielsweise Materialize, eine CSS-Lösung, an der noch immer fleißig gearbeitet wird. Kürzlich haben wir uns außerdem mit Angular Material beschäftigt, der MD-Implementierung für gegenwärtige AngularJS-Versionen. Dieses Framework ist jedoch nur eine von vielen Optionen. Darum werfen wir nun einen Blick darauf, welche Frameworks und Libraries Entwicklern sonst noch so zur Verfügung stehen, um den beliebten Designstil umzusetzen.

Ob iOS und Swift, HTML5 oder CSS – für jede dieser Optionen gibt es zahlreiche Alternativen zur Arbeit mit dem Material Design. Manche geben dabei ein Design verbindlich vor, andere bieten nur Optionen an und überlassen die Entscheidung dem Entwickler. Die Vielfalt im Web reicht von klassischen Google-Darstellungen bis hin zu kreativen Design-Studien, die zeigen, was alles möglich ist, wenn man das Gestaltungsprinzip an seine Grenzen treibt.

Material Design Lite – Material Components

Material Design Lite war die erste eigene Implementierung der Design-Standards für den Desktop von Google. Seit Ende 2016 befindet sich das Projekt jedoch in einem Limited Support Mode und wird nicht mehr durch Google weiterentwickelt. Wie auf GitHub zu lesen ist, wird es künftig nur noch Community-generierte Updates geben; Googles Entwicklerteam prüft diese nur noch. Außerdem wird das offizielle Kernentwicklerteam weiterhin kritische Bugs fixen. Darüber hinaus hat sich das Team aus Google-Entwicklern aber einem neuen Projekt zugewandt: Material Components.

Mit Material Components löst Google die Trennung der Implementierungen für Web- und Mobile-Plattformen im Rahmen des Material Designs auf. Wo zuvor Material Design für mobile Anwendungen genutzt wurde und Material Design Lite fürs Web, ersetzen die Material Components nun dieses duale System: Eine gemeinsame Lösung für Web, Android-App und iOS. Für jede Plattform findet sich auf der Website des Projekts eine eigene Dokumentation mit Getting-Started-Guide, der den Einstieg in die Arbeit vereinfachen soll.

Bereits anhand des Namens zeigt sich außerdem schon, dass es sich um eine wenig dogmatische Lösung für die Arbeit mit dem Material Design handelt. Wo früher die Rede davon war, dass alle Apps im Material Design-Stil gleich aussehen würden – und zwar genau wie die Google-Apps – verweist nun das Google-Team selbst in den FAQ darauf, dass die Material Components dazu da sind, eigene Designs zu erstellen. Die Google-Apps würden ein Corporate Design darstellen und seien keineswegs der Goldstandard für das Anwendungsdesign, den es möglichst genau zu imitieren gelte. Im Kontext der iOS-Integration muss dabei vor allem bedacht werden, dass sich die typischen Nutzerführungen von Android- und iOS-Apps unterscheiden, sodass eine Adaption der Standards des einen Systems auf das andere auch zum Hindernis für eine gute UX werden könnte. Auch dieser Hinweis findet sich auf der Material-Components-Website.

iOS-Frameworks: Framework7

Mit der Adaption der Design-Standards für Apple-Devices steht Google allerdings nicht alleine dar; das Material Design kann auch mit anderen Frameworks auf iOS genutzt werden. Ein Beispiel dafür ist das Framework7, das lange ausschließlich für iOS verfügbar war, jetzt aber auch die Entwicklung von hybriden Apps unterstützt. Auffällig an dieser Implementierung ist vor allem, dass es sich nicht um eine reine MD-Adaption handelt, sondern vertraute Bedienungsweisen aus iOS nativ in das Material Design eingebunden wurden. Die Projektwebsite erklärt, dass das Ziel hinter Framework7 sei, eine native iOS-UX mit den aus Android bekannten MD-Elementen zu kombinieren.

Material Controls for iOS

Außerdem stehen mit Material Controls for iOS die typischen MD-Navigationselemente aus Android-Apps für iOS-Anwendungen als eigenes Paket zur Verfügung. Unterstützt werden hier die folgenden Menü-Elemente: MDButton, MDTableViewCell, MDProgress, MDSlider, MDSwitch, MDTabBar, MDTabBarViewController, MDTextField, MDSnackbar, MDToast, MDDatePicker und MDTimePicker. Zu beachten ist jedoch, dass damit keine vollständige Adaption der Design-Standards erfolgen kann, sondern nur eine partielle Anpassung des Layouts. Im Sinne des Brückenschlags zwischen beiden Welten könnten sich solche minimalistischen Konzepte allerdings durchaus als hilfreich erweisen.

Material Swift

CosmicMind hat mit Material Swift eine Material Design Library für Swift vorgelegt, deren zentrales Element Animationen und Transitions sind. Diese entsprechen den Standards des Material Designs; der Nutzer kann also optisch nachvollziehen, was auf dem Bildschirm passiert – Dinge verschwinden nicht einfach, sie bewegen sich sichtbar. Allerdings wurde die Implementierung überarbeitet und beruht nun auf der Library Motion, die ebenfalls von CosmicMind entwickelt wurde. Mit den typischen Karten, Hover-Effekten und dem Floating-Action-Button entspricht die Optik aber ganz den von Google gesetzten Standards.

API Summit 2017

Moderne Web APIs mit Node.js – volle Power im Backend

mit Manuel Rauber (Thinktecture), Sven Kölpin (Open Knowledge)

API First mit Swagger & Co.

mit Thilo Frotscher (Freiberufler)

HTML5-Hybride: Onsen UI

Onsen UI ist ein Framework für die Entwicklung von hybriden Anwendungen, mit der das Layout automatisch an die Plattform angepasst wird, von der aus ein User eine App aufruft – eine Codebasis, zwei UIs, so beschreibt es die Website des Projekts. Apps werden dazu in HTML5 erstellt und via Framework im Stil des Material Designs angezeigt. Welches Javascript-Framework für die Entwicklung zum Einsatz kommt, ist nicht entscheidend: OnsenUi ist Framework-agnostisch. Die Arbeit mit dem Framework wird in verschiedenen Tutorials erklärt, anhand derer auch sichtbar wird, dass die iOS-Version des Layouts nur anteilig dem Material Design entspricht und sich stark am typischen Apple-Stil orientiert.

Surface: Pures CSS

Surface hingegen stellt eine Material-Design-Implementierung in purem CSS dar. Mit nur 5,7kb Downloadvolumen ist die Library besonders klein; bereits auf der Startseite der Projektwebsite erfährt man, dass keinerlei JavaScript verwendet wird. Die Auswahl an Komponenten ist dafür trotzdem recht groß. Zu beachten ist allerdings, dass nicht die gesamte Farbpalette des Material Designs verfügbar ist.

Fluent Design und Material Design?

Auch die neuste Design-Schule von Microsoft zeigt, dass die Idee eines Designs im Sinne physischer Erfahrungsgrundlagen aktueller denn je ist: Das Fluent Design ist von Tiefen- und Bewegungseffekten geprägt, die die Nutzerführung unterstützen und dabei physischen Objekten und optischen Effekten ähnlich sind, die man aus der nicht-virtuellen Welt kennt. Zwar ist die Design-Sprache von Microsoft stärker auf AR und VR ausgerichtet und überschneidet sich auch optisch nicht in jedem Detail mit dem Material Design – Ähnlichkeiten lassen sich aber nicht leugnen.

So wird bei Microsoft beispielsweise mit Licht gearbeitet, während Google darauf setzt, transformative Effekte zur Hervorhebung aktiver Elemente zu verwenden. Wenn es bei Microsoft leuchten soll, damit der Nutzer weiß, was passiert, ändert sich bei Google die Farbe. Auch bei Microsoft sollen sichtbare Veränderungen anstatt des abrupten Auftauchens neuer Zustände oder Informationen genutzt werden – hier verweist auch Microsoft auf die physische Welt, in der sich Gegenstände bewegen und verändern und ist damit auf einer Linie mit Google. Wer also eine 3D-Implementierung von Design-Ideen ähnlich denen des Material Designs sucht, könnte bei Microsoft fündig werden.

Die richtige Wahl treffen

Die Auswahl an Material Design Lösungen wird also eher größer und reichhaltiger als kleiner. Für alle, die sich unsicher sind, welches Framework sie wählen sollen, hat Giannis Konstantinidis einen Guide geschrieben, der sechs Frameworks anhand verschiedener Faktoren bewertet. Als Kriterien, die auch für eine eigene Beurteilung relevant sein könnten, schlägt er fünf Faktoren vor: Die Menge der Anwender eines Frameworks ist Faktor eins, weil dies anzeigt, wie ausführlich das Framework bereits in der Praxis getestet wurde. Die Frage, wer hinter dem Framework steckt, stellt den  zweiten Faktor dar: Sind die Entwickler motiviert; gehören sie einer Organisation an oder handelt es sich um Privatpersonen?

Faktor drei ist die Release-Frequenz: Wer mit der neusten Technologie arbeitet und viele Prototypen entwickelt, so Konstantinidis, sei wahrscheinlich besser mit einem Framework bedient, das häufig neue Versionen herausbringt. Die Dokumentation (Faktor 4) ist hingegen vor allem für Anfänger in der jeweiligen Technologie wichtig; sie kann aber auch erfahrenen Entwicklern beim schnellen Einstieg helfen. Faktor fünf greift einen ähnlichen Aspekt auf: Die Frage nach den Voraussetzungen für die Arbeit mit einem Framework sollte kritisch betrachtet werden, vor allem wenn man nur schnell eine App entwickeln wolle und nicht vorhabe, sich in neue Technologien einzuarbeiten.

Am Ende ist es aber natürlich vor allem eine Frage des eigenen Geschmacks, welches Framework man wählt. Die meisten davon bringen zumindest auf der Basisebene des Designs die gleichen Elemente mit, ihre Auswahl wird also durch die jeweilige Ausrichtung auf bestimmte Tools eingeschränkt. Aufpassen muss man jedoch, wenn man eine spezifische Abweichung vom Design-Standard plant und diesen via Framework umsetzen möchte, sollte einen genauen Blick auf die infrage kommenden Lösungen werfen. Wenn aber vor allem ein gutes UI mit einfachem Design entstehen soll, ist die Auswahl fast grenzenlos.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -