Webdesign-Trends – Teil 2: Der Metro-Style

Betrachtet man die Strömungen der Gestaltungssprachen im Webdesign ab 2012, fällt sofort die Oberflächengestaltung von Windows 8, dem Windowsphone und der XBox ins Auge. Als neues Corporate UI (User Interface) von Microsoft wurde ein gewaltiger Schritt gewagt: neben einem klassischen iconbasierten Design wirkt die bunte, klare und verlockend einfache Kachelgestaltung wie ein Jungbrunnen fürs Auge. Zweidimensionalität, klare Abgrenzungen, intuitive Benutzerführung, größtmögliche Einfachheit, Symbole statt vieler Worte – der Metro-Style.

Ursprung des Metro-Style

Eine Inspirationsquelle des Metro-Style ist bei Walter Gropius, einem Mitbegründer des Bauhauses, zu finden. Frei nach dem Credo „die Form folgt der Funktion“ wird die Oberfläche nicht als Simulation der Natur verstanden, sondern als eine authentische digitale Gestaltungsmöglichkeit, die sich speziell auf die Zweidimensionalität bezieht: Überflüssiges wird weggelassen, damit nichts von Botschaft und Funktion ablenkt.

Eine weitere Quelle, die auch namensgebend ist, ist die Symbolik bei Transportmitteln in Flughäfen, Zug- und U-Bahnstationen, wie eben der Metro. Durch allgemeingültige Zeichen, die jeder versteht, wird eine internationale Symbolsprache geschaffen, die eine Orientierung unabhängig der lokalen Sprache ermöglicht.

Verwendung im Webdesign

Der Metro-Style prägt momentan stärker Benutzeroberflächen als direkt das Webdesign. Als gestalterisches Element jedoch, gewinnt der Stil zunehmend an Bedeutung. Die typische Kachelaufteilung wird immer öfter übernommen, allerdings inhaltlich freier interpretiert. Gerade im Webdesign bietet der Metro-Style die Chance, übersichtliche Landingpages zu schaffen und die Kacheln durch Akkordeonfunktionen zu öffnen. Auch als neue Ordnungsstrategie für Listen und Galerien ist diese Aufteilung eine echte Alternative: tabellenartige Aufteilungen werden durchbrochen und übersichtlicher gestaltet, durch Mouseovers wird eine einfache Benutzerführung gewährleistet.

Vergleicht man Webseiten und Benutzeroberflächen mit diesem Stil, findet man folgende Gemeinsamkeiten:

  • Vor einem ruhigen Hintergrund stechen sofort die bunten Kacheln ins Auge. Klare Abgrenzungen werden durch leuchtende, kontrastreiche und intensive Farben erzeugt.
  • Über Allem steht die Usability, also die Benutzerfreundlichkeit. Alles Überflüssige wird zugunsten einer bis zur Kernaussage reduzierten Botschaft entfernt.
  • Die Anordnung der Kacheln ist jeweils auf das Engerät angepasst und daher variabel. Von einer klaren, einfachen Aufteilung bis zu Verschachtlungen, die an ein Gemälde von Piet Mondrian (1872 – 1944) erinnern, ist alles möglich.
  • Die Designsprache der Symbole ist absolut auf dem Punkt gebracht, graphische Spielereien und Verzierungen werden zugunsten einfacher Lesbarkeit geopfert. Aber Vorsicht, die Grenzen sind fließend! Gerade im Webdesign werden auch Verläufe, Schatten oder Schlagschatten (Longshadow) bei den Symbolen als graphisches Alleinstellungsmerkmal verwendet. Trotzdem gilt: Die Botschaft steht im Vordergrund!
  • Die Gestaltung einer Kachel ist in der Regel in einer ausdrucksstarken Farbe, mit einem deutlichen Symbol und einem erklärenden Schriftzug. Alternativ wird die gesamte Kachel mit einem Bild oder einer Animation gefüllt. Damit wird durch ein klares Statement die Bedeutung verdeutlicht.
  • Durch Motiondesign, also kleine Animationen innerhalb der Kacheln, wird der Nutzer auf Features aufmerksam gemacht und die Bedienung vereinfacht. Im Webdesign wird diese Funktion oftmals von Mouseover – Effekten übernommen.
  • Die Typographie ist serifenlos und damit deutlich, klar und gut lesbar. Alles was von der Schrift ablenkt, gilt es zu vermeiden.
  • Ein wichtiger Aspekt ist die Farbsprache. Leuchtende Farben, starke Kontraste – auch im Komplementärbereich – zur Abgrenzung der Kacheln sind ein beliebtes Element. Gerade diese junge, moderne Farbsprache lässt diesen Look frisch und unverbraucht wirken.

Fazit

Durch Innovation und Dynamik wird so eine völlig neue Erfahrung geschaffen, die konventionelle Designs schnell etwas angestaubt wirken lässt. Mit dieser minimalistischen und typographieorientierten Gestaltungssprache wird klar ein Trend in Richtung zweidimensionalen und reduzierten Design gesetzt. Nicht zuletzt ist daher der Metro-Style einer der beliebtesten Darstellungsformen für Touchscreenoberflächen geworden, da kaum ein anderer Stil so sehr auf die Bedürfnisse der Endgeräte wie auch der Nutzer eingeht.