Buttons, Tabs und Cards: Komponenten im “Material Webdesign”

In einem vorherigen Artikel haben wir bereits gezeigt, wie Material Design eine solide Basis für den allgemeinen Stil einer Webseite definiert, indem Farben, Typographie und Bilder festen Gestaltungsprinzipien folgen.

In diesem Artikel möchten wir alle vorherigen Artikel zusammenfassen und zeigen, wie sich der Gestaltungstrend konkret im Webdesign integrieren lässt. Dazu stellen wir verschiedene Komponenten vor, die auf nahezu jeder Webseite anzutreffen sind und bieten konkrete HTML- und CSS-Beispiele, wie diese Elemente im Material Design umgesetzt werden können.

1. Die Grundlage: Papiere und Panels

Viele Elemente im Material Design basieren auf "magischem Papier". Diese Container nutzen räumliche Tiefe, Schatten und Weißraum, um ein konsistentes Layouts zu erzeugen.

Im Webdesign lassen sich diese "Papers" einfach als weiße Boxen mit etwas Padding und Schlagschatten umsetzen. Auch die Gruppierung und Hervorhebung mehrerer Papiere ist mit etwas CSS leicht zu lösen:

2. Die Alleskönner: Cards

Die wenigsten Elemente im Webdesign bestehen jedoch nur aus einer Box. Vielmehr bilden meistens mehrere einzelne Inhalte ein gemeinsames Element. Ein Teaser besteht beispielsweise aus einem Titelbild, einer Überschrift und einem beschreibenden Text und wird von einem Link oder Button abgerundet.

Um solche Kompositionen einzelner Objekte als Einheit darzustellen, bieten sich sogenannte “Cards" an. Diese flexiblen Container können ähnliche Elemente unterschiedlicher Größe und Länge konsistent und übersichtlich präsentieren.

Cards bieten insbesondere für die folgenden typischen Aufgaben im Webdesign eine gute Basis:

• Verschachtelte Listen:
  Mehrstufige, verschachtelte Listen - beispielsweise To-Do Listen - lassen sich als "Card-Sammlung" anschaulicher und übersichtlicher präsentieren, als in reiner Listenform.
• Teaser- & Kommentarlisten:
  Mehrere ähnliche Informationen können durch Cards zusammengehörend dargestellt werden, selbst wenn sie in ihrer Länge stark variieren.
• Grids & Raster mit detaillierten Interaktionen:
  Interaktionen wie "Like"-Buttons oder "Weiterlesen"-Links lassen sich in der Fußzeile einer Card einfach integrieren - und unterstützen so den tatsächlich dargestellten Inhalt, ohne davon abzulenken.

3. Fokussierte Entscheidungen: Dialog-Boxen

Um Nutzer einer Webseite auf wichtige Informationen hinzuweisen oder zu einer bestimmten Entscheidung zu zwingen, können Dialog-Boxen genutzt werden. Diese Boxen bestehen grundsätzlich aus einem Titel, einer kurzen Beschreibung der Aktion, sowie möglichen Interaktionen. Die im vorherigen Abschnitt vorgestellten Cards bieten eine sehr gute gestalterische Basis für Dialog-Boxen.

Typische Dialog-Boxen im Webdesign sind beispielsweise:

• Bestätigen/abbrechen bzw. weiter/zurück:
  Um sicherzustellen, dass ein Nutzer tatsächlich eine bestimmte Aktion durchführen möchte (und nicht aus Versehen auf eine Schaltfläche geklickt hat), kann eine Dialog-Box eine zusätzliche Bestätigung der Aktion erzwingen. 
• Auswahl einer Option:
  Die Integration von Optionen und Einstellungsmöglichkeiten in ein schlankes Webdesign ist häufig schwierig. Insbesondere auf mobilen Geräten können manche Optionen - wie die Anpassung der Schriftgröße - auch über Dialog-Boxen gesteuert werden.
• Interaktionen/Formulare:
  In einer gut gestalteten Dialog-Box können sogar komplette Formulare Platz finden. Dies ist beispielsweise für Login-Formulare oder Einstellungen wie Zugangsdaten nützlich.

Da Dialog-Boxen den Nutzer bei seiner aktuellen Interaktion unterbrechen, sollten sie ausschließlich eingesetzt werden, wenn ihre Aktion eine entsprechende Unterbrechung rechtfertig.

4. Authentische Interaktionen: Buttons

Ein wichtiger Baustein vieler Komponenten sind Buttons, die einem Nutzer klar kommunizieren, welche Interaktion sie mit einem Klick auslösen. In der Regel bestehen Buttons aus einem kurzen Text, der manchmal durch ein erklärendes Icon ergänzt wird.

Damit ein Button physikalisch korrekt auf Interaktionen reagiert, sollten verschiedene Animationsregeln beachtet werden. Diese haben wir ausführlich in einem früheren Artikel rund um authentische Bewegungen im Webdesign untersucht.

5. Aufgeräumte Inhalte: Tabs

Tab-Reiter sind seit langer Zeit ein beliebtes Element, um zwischen verschiedenen Inhalten zu navigieren. Auf diese Weise können unterschiedliche Informationen und Funktionen im Webdesign gleichberechtigt und leicht erreichbar angeordnet werden.

Während der Inhalt eines Tabs grundsätzlich völlig frei gestaltet werden kann, sollte die Navigation der Tab-Elemente folgende Grundsätze beachten:

• Die Bezeichnung eines Tabs sollte immer einzeilig sein.
• Die Navigation sollte mindestens zwei und maximal sechs Einträge umfassen.
• Der Navigationspunkt des gerade sichtbaren Inhalts ist visuell hervorgehoben.
• Die Navigation muss sich räumlich nahe bei den Inhalten der Tabs befinden.
• Die Navigation soll ausschließlich eine Ebene umfassen - Tabs sollen also nie verschachtelt werden.

6. Bonus für Webanwendungen und Apps: Menüleisten

Die Navigation einer Webseite ist häufig ein sehr detailliert gestaltetes Element. Da Material Design jedoch aus dem Bereich der mobilen Apps und Anwendungen kommt, definiert es auch die Navigation als schlankes und schlichtes Element.

Unserer Meinung nach ist diese Art der Navigation im Webdesign nur selten nutzbar - für das Design von Webanwendungen und Apps bietet eine solche Toolbar hingegen eine übersichtliche und doch ansprechende Navigation.

Zusammenfassung: Neue Werkzeuge für Webdesigner

Die in diesem Artikel vorgestellten Komponenten zeigen, wie sich die verschiedenen Elemente des Material Designs in ein modernes Webdesign integrieren lassen - und dabei sowohl Bekanntes unterstreichen, aber auch neue interaktive und gestalterische Ansätze einbringen.

Zwar lässt sich eine Webseite nur selten komplett nach den Regeln des Material Design umsetzen, dennoch bietet der Gestaltungstrend uns Webdesignern neue Werkzeuge, um Inhalte im Browser zu präsentieren.

So geht es weiter: Nutzerführung im Webdesign

Im nächsten Artikel werden wir uns wieder von den konkreten Komponenten entfernen und stattdessen einen Blick auf die grundlegenden Gestaltungs- und Interaktionsmuster des Material Designs werfen. Dabei werden wir neben Gesten wie "Swipen" und "Pullen" auch technische Vorgänge wie die Präsentation von Ladevorgängen vorstellen und untersuchen, wie diese Muster die Nutzerführung im Webdesign beeinflussen.