bldwin – Designing Metro style: principles and personality

Samuel Moreau (Director UX Design and Research, Microsoft) hat in seinem Vortrag über die Hintergründe und Inspirationen für das Metro-Style Design sowie über die Designprinzipien für Metro-Style Apps gesprochen.

Ziele und Hintergründe

Das Metro-Style Design ist ein wichtiger Schritt für Microsoft hin zu einer durchgängigen Designsprache für deren Produkte. Es wurde hauptsächlich beeinflusst von:
* Konzentration auf das Wesentliche (Bauhaus)
* Klare und direkte typographiebasierte Gestaltung, Gestaltungsraster, deutliche Farbgestaltung und Ästhetik (Swiss Design)
* Emotionalität durch Bewegung (Motion Design)


Inspirationen für Metro-Style (Screenshot aus dem Vortrag)

Metro-Style Design Principles

Die Designprinzipien für Metro-Style sind keine strikten Regeln, die es zu befolgen gilt. Sie sind ein Orientierungshilfe für die Gestaltung von Bedienoberflächen für Windows 8. Sie können aber beispielsweise in Abhängigkeit des Anwendungsfalles und der Marke angepasst werden.

The principles approach is to not having answers. It’s to have a framework for how to think about some things that everyone shares commonly and then you are allowed to make your own decisions. You have a freedom to make your own decisions.

Er ist in seinem Vortrag dann auf die Details zu den einzelnen Designprinzipien eingegangen:

Pride in craftsmanship

Damit ist gemeint:
* Liebe zu Details,
* Vermittlung eines Gefühls von Zuverlässigkeit,
* Saubere Ausrichtung,
* Harmonische Gestaltung (Hierarchie, Symmetrie, Balance)
Als Beispiel für dieses Designprinzip führt er die Printgestaltung der heutigen “The New York Times” an.
Um dieses Designprinzip zu erfüllen, werden die Oberflächen von Metro-Style Apps auf Basis eines Gestaltungsrasters gestaltet. Das grundlegende Gestaltungsraster besteht aus gleich großen Einheiten, die jeweils 20 px hoch und breit sind. Auf Basis dieses Grundgestaltungsrasters wurden mehrere Raster für unterschiedliche “Seitentypen” abgeleitet.


Windows 8 Metro Gestaltungsraster

Im Metro-Style Design werden drei Schriftgößen verwendet: 9, 11, 20 und 42 Punkt. Als Schrift wird die Segoe UI eingesetzt.

Be fast and fluid

Damit ist gemeint:
* Gestaltung für mobile Geräte,
* Begeistern durch Bewegung,
* Touchorientierte Gestaltung,
* Intuitive Interaktion.

Authentically digital

Damit ist gemeint:
* Produkte, die mit der Cloud verbunden sind,
* Dynamische und lebendige Produkte,
* Schön durch Typographie,
* Kräftige und leuchtende Farben,
* Animation.

Do more with less

Damit ist gemeint:
* Anwendung sollen eine Sache richtig großartig können,
* Fokus auf den Nutzen und den Inhalt,
* Motivation der Anwender durch Erwartungskonformität, Verständlichkeit und Einfachheit,

Win as one

Damit ist gemeint:
* Applikationen sollen sich am UI Konzept von Metro orientieren,
* Redundanzen sollen reduziert werden (z.B. eine Gerätweite Suche)
* Anwendungsübergreifende Bedienabläufe,
* Verwendung von Templates und Tools für Metro-Style Apps

Interessante Bitte zum Schluss

Zum Abschluss seines Vortrages hat er sich dann noch mit einer Bitte an die Teilnehmer gewandt:

Please partner with a designer.

Microsoft scheint sich der Herausforderung sehr wohl bewußt zu sein, vor die sie Windows Softwareentwickler stellen.

Siehe auch

Video zum Vortrag
build windows

War dieser Artikel hilfreich für Dich?

Nach oben scrollen