Magisches Papier: Layout und Tiefe im Webdesign

Ähnlich wie bei Animationen und Styling bietet Material Design auch für die Grundstruktur eines Webdesigns klare Regeln. Ein besonderer Fokus liegt auf Gestaltungsrichtlinien, die für alle Bildschirmgrößen funktionieren, um eine Webseite geräteübergreifend konsistent und doch flexibel zu gestalten. So bietet eine Webseite Besuchern stets ein vertrautes Erscheinungsbild - egal, ob sie über ein Smartphone, ein Tablet oder den Computer aufgerufen wird.

Im Folgenden zeigen wir, wie Schatten, Raster und Weißraum helfen, diese Konsistenz im Webdesign zu erreichen.

Magisches Papier: Die Grundlage jeder Webseite

Nach den Richtlinien des Material Design wird jeder Pixel einer Webseite auf ein Blatt Papier gezeichnet. Papier kann dabei je nach Größe und Beschaffenheit die unterschiedlichsten Einsatzmöglichkeiten finden.

Durch die Anordnung mehrerer Blätter können selbst komplexe Layouts übersichtlich und aufgeräumt umgesetzt werden.

Zwei Papierblätter können sich entweder überlappen oder gemeinsam bewegen. Letzteres ist der Fall, wenn sich mehrere Papiere eine gemeinsame Kante teilen und sich auf derselben Ebene befinden. Befinden sich Papiere jedoch in unterschiedlichen räumlichen Tiefen (Stichwort: z-index), können sie unabhängig voneinander bewegt werden.

Schatten im Webdesign: Räumliche Tiefe verständlich darstellen

Ein modernes Webdesign befindet sich in einer dreidimensionalen Umgebung. Einzelne Elemente verteilen sich daher nicht nur entlang einer X- und Y-Achse, sondern auch entlang einer Z-Achse, die den Abstand eines Elements zum Betrachter angibt. Im Material Design ist diese Z-Achse besonders wichtig, da jedes Papier nur eine minimale Dicke von einem Pixel einnimmt (unabhängig der tatsächlichen Auflösung eines Geräts).

Ein effektives Gestaltungselement zur intuitiven Präsentation der Verteilung von Elementen entlang der Z-Achse sind Schatten. Grundsätzlich können zwei Arten von Schatten unterschieden werden: Ausgerichtete Schatten und konsistente Schatten.

Ausgerichtete Schatten werden von einer fiktiven Lichtquelle (dem sog. "key light") erzeugt, die Elemente aus einem bestimmten Winkel beleuchtet und so zu einem Schattenwurf im entsprechenden Winkel führt.

Konsistente Schatten werden hingegen von einem globalen Licht erzeugt (dem sog. "ambient light") und erstrecken sich in der Regel weich über alle Winkel.

Die konkrete Entfernung bzw. Nähe eines Elements zum Betrachter kann durch die Stärke der Schatten (sowohl vom "key light" wie auch vom "ambient light") verdeutlicht werden. Dabei gilt: Je stärker der Schattenwurf eines Elements, desto höher der z-Index eines Elements und desto näher ist ein Element aus Sicht des Betrachters.

Übersichtlich und aufgeräumt: Raster und Weißraum im Webdesign

Alle Bereiche und Elemente einer Webseite sollten stets an einem - wie auch immer definierten - Raster ausgerichtet sein. Im Webdesign gibt es bereits eine große Auswahl an Grid-Systemen, die eine vorgefertigte (und im besten Fall individualisierbare) Aufteilung von Inhalten entlang eines Rasters ermöglichen. Einige verbreitete Grid-Systeme sind:

• Bootstrap:
  Bootstrap ist das aktuell am meisten genutzte CSS-Framework und bietet mit dem mitgelieferten Grid-System eine effektive Möglichkeit, einfache responsive Raster zu definieren.
• YAML:
  Nicht so verbreitet wie Bootstrap bietet das CSS-Framework von YAML ebenfalls ein responsiv anpassbares Grid. Das Highlight von YAML ist auf jeden Fall die Unterstützung für "right to left"-Layouts, z.B. für arabische Sprachen.
• 320 and Up:
  Leider aktuell nicht mehr weiterentwickelt, hat das Grid-System "320 and Up" als eines der ersten Systeme den Ansatz der "mobile first"-Entwicklung verfolgt.
• Bourbon Neat:
  Das Sass-Framework Neat basiert auf der Bourbon-Bibliothek und bietet zahlreiche Funktionen, um eigene Raster schnell und einfach über Sass zu definieren. Aufgrund der effektiven Nutzung über Sass ist Neat unser Favorit für Raster aller Größen und Komplexitätslevels.

Zusätzlich zur Anordnung von Elementen sollten sich auch die Abstände innerhalb eines Elements am Raster orientieren. Die Material Design Richtlinien schlagen ein sehr feines Raster von nur 8 Pixeln vor, an welchem sich sowohl Spalten und Zeilen eines Grids, wie auch Abstände zwischen Elementen orientieren sollen.

Im Webdesign hingegen hat sich - insbesondere durch Twitter Bootstrap - eher ein Raster mit Abständen von 20 bis 30 Pixeln eingebürgert. Unabhängig der genauen Maße empfiehlt sich in jedem Fall der Einsatz von Variablen zur Steuerung von Außen- und Innenabständen, um ein ruhiges und konstantes Layout sicherzustellen.

Usability auf Geräten mit Touch-Steuerung

Da die Material Design Richtlinien in erster Linie für das Design von Android-Apps vorgesehen sind, kommt der Usability einer Anwendung auf Geräten mit Touch-Steuerung eine besondere Bedeutung zu. Google schlägt eine minimale Größe von 48 Pixeln für interaktive Elemente vor, damit diese auch mit einem Daumen akkurat zu treffen sind (Apple hingegen hält eine Höhe und Breite von 44 Pixeln für ausreichend).

Nach unseren Erfahrungen stellt eine Mindestgröße zwischen 42 und 48 Pixeln einen guten Kompromiss zwischen Informationsdichte, Design und Usability eines Interfaces dar.

Zusammengefasst: Papiere im dreidimensionalen Raum

Insgesamt stellt Material Design mit "weißen Boxen" (= Papieren) und Schatten keine neuartigen Gestaltungselemente bereit. Die starke Orientierung an realen Materialien und Umgebungen bietet jedoch eine klare rote Linie, an der sich Entscheidungen rund um Webdesign und Screendesign messen lassen. So lassen sich beispielsweise Schatten wie gezeigt harmonisch aufeinander abstimmen. Falsche Designentscheidungen hingegen lassen sich ebenso leicht aufdecken, da sie sich nicht in das materielle Gesamtbild eines Webdesign einfügen und so als Fremdkörper zu erkennen sind.

Auf diese Weise kann Material Design als Basis für die Kommunikation von Designern untereinander dienen - und gleichzeitig Besuchern einer Webseite die Funktionen und den Aufbau eines Webdesigns intuitiv und verständlich präsentieren.

So geht es weiter: Konkrete Komponenten im Einsatz

Im nächsten Artikel werden wir alle bisher vorgestellten Prinzipien und Richtlinien anhand konkreter Elemente vereinen. Dabei werden wir besonderes Augenmerk auf im Webdesign typische Komponenten wie Listen, Navigationen und Dialog-Boxen legen und untersuchen, wie sich diese Elemente im Material Design von ihren traditionellen Versionen unterscheiden.