Hintergründe

Die Inspirationsquelle für das Metro-Style-Design

Uhr | Aktualisiert
von Laurent Bugnion

Das Metro-Style-Design kommt auf fast allen Endgeräten zur Geltung, beispielsweise auf Smartphones, Windows-8-Tablets und vollausgestatteten Desktop-Computern. Doch das Designkonzept ist nicht über Nacht entstanden. Dieser Artikel geht den Quellen auf den Grund, die als Inspiration für die Entwicklung der Metro-Design-Sprache dienten.

Ein wenig Geschichte vorweg: Design entwickelt sich – wie auch Kunst – durch viele Einflüsse. Zur Entstehung der Metro-Design- Sprache haben einige Strömungen und Designschulen beigetragen.

Das Bauhaus – die Welt verändert sich

Das Bauhaus wurde in den 1920er-Jahren vom Architekten Walter Gropius in Deutschland in einer Zeit grosser Veränderungen gegründet. Der Erste Weltkrieg und die Spanische Grippe hatten viele Menschenleben gekostet. Trotzdem war die Zeit zwischen beiden Weltkriegen durch Euphorie und ein Gefühl des Neuanfangs geprägt. Gleichzeitig fand noch ein ganz anderer Wandel statt: der Übergang von Handarbeit und Kunsthandwerk zur Industriegesellschaft. Objekte, die bis dahin gewöhnlich von Hand gefertigt worden waren, wurden nun von Maschinen produziert.

All dies beeinflusste das Design der Bauhaus-Schule. Voller Ambitionen wollte das Bauhaus gleich von Anfang an alle Lebensaspekte abdecken: Grafikdesign, Produktdesign und später auch Architektur. Die Designphilosophie zeichnet sich durch eine starke Vereinfachung des Objekts aus: Auf übertriebene und unnötige Verzierungen wird verzichtet, der Fokus liegt stattdessen auf der Funktionalität des Objekts. Das Motto "Form folgt Funktion" unterstreicht das. Die Funktionalität eines Objekts hat vor dessen Erscheinung Vorrang. Alles am Objekt, was seiner Funktion nicht dient, ist überflüssig und sollte weggelassen werden.

Klar und funktional

Sowohl in der Architektur als auch im Grafik- oder Produktdesign waren Klarheit und Einfachheit die Merkmale des Bauhauses. Die typischen Stühle beispielsweise sind rein funktional: Es gibt keine übertriebenen Verzierungen, keine Symbole oder Farbverläufe – nichts, was von der Botschaft oder der Funktion ablenken könnte.

Diese Philosophie von "auf den Punkt bringen" und "nichts Überflüssiges" findet sich in der Microsoft-Metro-Design-Sprache wieder. Der Metro-Style ist "authentisch digital", was bedeutet, das die metro-inspirierte Benutzeroberfläche keine starken Schattierungen, übertriebenen Strukturen oder Glaseffekte aufweist, wie sie in anderen Betriebssystemen vorkommen. Der Computerbildschirm wird nicht als Simulation der Natur verstanden. Deshalb werden unnötige Verzierungen entfernt, man konzentriert sich die Funktion der Benutzeroberfläche.

Schweizer Typografie

Eine weitere bedeutende Inspiration für die Entwicklung der Metro-Design-Sprache ist schweizerischen Ursprungs: Die Typografie, die in den 1950er-Jahren hier erschaffen und seither immer wieder neu definiert wurde, spielt eine grosse Rolle. Den Benutzern eines Windows-Phone beispielsweise wird schnell klar, dass der Metro-Style grossen Wert auf die Lesbarkeit und die Schriften an sich legt.

Nicht selten dienen Textbausteine als Bedienungselement anstelle von Schaltflächen, und die meisten Bedienungselemente haben ein einfaches und klares Design, wobei eine geeignete Typografie sehr wichtig ist. Klarheit, Balance und Lesbarkeit sind zentral: Schriften, die von der Schweizer Typografie inspiriert wurden, stellen die Lesbarkeit in den Vordergrund. Dies gilt insbesondere für Schriften auf Computerbildschirmen und noch mehr auf Mobilgeräten, denn auf kleinen, hintergrundbeleuchteten Displays kann die Lesbarkeit im hellen Tageslicht ein Problem darstellen, weshalb bei diesen Geräten speziell auf die Schriften geachtet werden muss.

Alles, was den Leser von der Hauptfunktion der Schrift ablenkt, gilt es zu vermeiden – ähnlich dem Bauhaus-Prinzip: Form folgt Funktion, keine übertriebenen oder unnötigen Verzierungen. Deshalb sind auch die Schriften der Schweizer Typografie serifenlos. Serifen sind kleine Details, oftmals ein kleiner horizontaler oder vertikaler Strich, der sich am Ende eines einzelnen Buchstabens befindet. Sie sind vor allem für den Druck sehr beliebt. Doch für die bessere Lesbarkeit auf digitalen Oberflächen werden serifenlose Schriften bevorzugt, beispielsweise die Segoe-Schriftfamilie. Sie wurde speziell für Benutzeroberflächen geschaffen und kommt unter anderem bei Mobiltelefonen, Spielkonsolen und auch Windows 8 zur Anwendung.

Motion-Design

Einen weiteren starken Einfluss auf das Metro-Style-Design hatte das Motion-Design. Wie für Filme, zum Beispiel im Vor- oder Abspann, eignet sich Motion Design auch gut für Benutzeroberflächen von Computern und speziell für Touchscreen-Oberflächen.

Mit raffiniert fliessenden Animationen kann die Benutzeroberfläche dem Benutzer den Weg weisen und ihm zeigen, welche Aktion als Nächstes durchgeführt werden muss. Dies gilt vor allem für schnelle Bildschirme: Sobald der Benutzer den Bildschirm berührt, erscheinen Animationen, die ihm helfen, Features zu entdecken. Wenn der Benutzer die Schaltfläche drückt, während der Bildschirm gesperrt ist, erscheint eine kurze Animation auf dem Sperrbildschirm, die den Benutzer darauf hinweist, dass er mit seinen Fingern die Sperre aufheben muss. Wichtig ist hierbei, dass die Hardware schnell genug reagiert, damit das Zusammenspiel aus der Fingerbewegung und der Aktion auf dem Bildschirm problemlos funktioniert.

Kinetische Typografie

Viele Filme arbeiten mit kinetischer Typografie, zum Beispiel mit "Text in Bewegung", um den Zuschauer im Vorspann in den Film zu führen. Einige hervorragende Beispiele finden sich in der Arbeit des Designers Saul Bass, etwa in Alfred Hitchcocks Film "North by Northwest". Andere, neuere Werke sind hier zu erwähnen, so zum Beispiel die Einleitung zu "Pulp Fiction" von Quentin Tarantino oder das ausgezeichnete Intro der Visuals- Künstler Kuntzel und Deygas bei Steven Spielbergs Film "Catch me if you can".

Kinetische Typografie hat auch in der Metro-Design-Sprache viel Bedeutung: Beim Windows Phone zum Beispiel erzeugt der Gebrauch der Panoramabedienung diesen Effekt von fliessender Bewegung. Die horizontale Bewegung ist vor allem bei Tablets mit Touchbedienung im Querformat sehr wichtig. Vertikale Bewegungen zur Listenbedienung sind immer noch anwendbar. Und die Kombination beider Elemente erzeugt eine angenehme Benutzererfahrung – so wie das Motion-Design ein aufregendes Gefühl für den Zuschauer schafft, bevor der Film beginnt.

Signaletik bei Transportmitteln

Wie der Name Metro es andeutet, waren Beschilderungen, wie man sie auf Flughäfen oder Zug- und U-Bahn-Stationen findet, eine Inspirationsquelle. Diese universale Designsprache stützt sich stark auf Typografie und einfache Symbole, die oft mit nur einer, dafür aber kräftigen Farbe herausstechen. Auch diese wirkungsvolle Designsprache bringt es "auf den Punkt". Sie hilft Reisenden, sich zu orientieren, wo auch immer sie sind und ohne Rücksicht auf die lokal gesprochene Sprache. Die Metro-Designsprache nutzt diesen Effekt, um dem Benutzer ein Gefühl von Einfachheit zu vermitteln.

Das Wissen über die Ursprünge des Metro- Style-Designs bildet eine solide Grundlage für das Verständnis seiner Funktion. Ziel ist es, damit eine konsistente Benutzererfahrung zu schaffen. Für den Endbenutzer hat dies den Vorteil, dass er nicht ständig neue Designkonzepte erlernen muss. Stattdessen kann er wiederholt nutzen, was er bereits aus anderen Anwendungen und dem Betriebssystem kennt. Die Inspiration des Metro- Style-Designs beruht auf Strömungen und Schulen, die sich der Klarheit, Einfachheit, Balance und des Flusses verschrieben haben. Diese Konzepte können dabei helfen, eine Benutzererfahrung zu schaffen, mit der sich Benutzer wohlfühlen.