Windows 8 hat mit seinen „flachen“ Farbkacheln, übernommen vom Windows Phone 7, erstmal viele Benutzer überrascht, aber erkannt dass eine moderne Benutzeroberfläche für alle Endgeräte geeignet sein muss. Das sogenannte Flat Design als Gegentrend zu möglichst realen Abbildungen (Papiertexturen, Farbverläufe, Fotos von Objekten) war geboren. Ausnahmsweise war hier mal nicht Apple an erster Stelle sondern hat diesen Trend ein wenig verschlafen und dann selbst im iOS7 aufgenommen.

Beim Flat Design wird auf eine realistische Darstellung von Texturen, Verzierungen, Schlagschatten und dreidimensionalen Elementen verzichtet und der Ansatz „weniger ist mehr“ verfolgt. Im Fokus steht die Reduktion der Gestaltung auf das Wesentliche. Farbe hingegen wird oft intensiv eingesetzt. Ein besonderes Merkmal ist auch das deutlich vergrößerte Schriftbild und die Verwendung besonderer Schriften und Piktogramme (z.B. Font Awesome). Letztere sind oft SVG Dateien und damit verlustfrei skalierbar.

Die wesentlichen Unterschiede sind in der Infographik von webmagazin.de beispielhaft aufgeführt:

„Apple vs. Microsoft – Flat Design vs. Skeuomorphic Webdesign“ – Eine Infografik exklusiv präsentiert von   WebMagazin.de.

Einige schöne Beispiele von Flat Designs sind  hier versammelt.

Besonders Start-Ups, Shops und besonders trendige Produktwebseiten steigen zunehmend auf Flat Designs um. Auch grafikintensive Benutzeroberflächen, z.B. bei Report- und Analysetools findet man immer häufiger in diesem Design Stil. Dabei wird zusätzlich sehr oft auch das Fullscreen oder Fullpage Layout verwendet, bei dem die gesamte Fensterbreite des Browsers für Inhalte verwendet wird. Für viele Inhalte und Zielgruppen ist das Flat Design aber grundsätzlich zu „poppig“, im B2B Bereich trifft man es eher selten an.

Flat Design und E-Mails

Konzeptionell ist Flat Design also eigentlich ideal für E-Mails: der Content rückt in den Vordergrund, aufwändige grafische Spielereien werden vermieden.

Aber: Flat Design erfordert intensiveres Nachdenken über die Verwendung der wenigen Stilelemente und der Farben, Schriften, Piktogramme. Sonst wird es schnell einfach nur bunt und verwirrend.

Wenn alle Elemente durch ihre Flachheit auf einer Hierarchie-Ebene existieren, wird es schwerer bestimmten von ihnen Sonderfunktionen zuzuweisen. Ein Button sollte als solcher erkennbar sein und nicht wie der farbig hinterlegte Artikeltitel aussehen.

Wie z.B. der Litmus Newsletter zeigt, kann Flat Design und in gewissem Rahmen auch Fullscreen Design auch in Newslettern angewendet werden. Natürlich macht es hier keinen Sinn den Content über die volle Breite zu ziehen, dann wird er unlesbar. Trotzdem wirkt dieses Design frischer und offener als viele klassische Layouts, die mit unzähligen Rahmen und Linien begrenzt werden.

Das volle Layout des Newsletters findest Du  hier.