Flat Design

Der Begriff Flat Design (deutsch: flaches Design) beschreibt eine spezielle Art des Webdesigns, bei dem die Funktionalität der Website in den Vordergrund tritt. Hierfür arbeitet man ohne bisher übliche Gestaltungselemente wie Texturen, Verzierungen oder Schlagschatten, um das Design auf seinen eigentlichen Kern zu reduzieren.

Prinzip von Flat Design

Das Flat Design steht im Gegensatz zu Skeuomorphismus, bei dem es in der Vergangenheit darum ging, Websites möglichst naturgetreu am „Original“ zu orientieren. Ein oft genanntes Beispiel sind Notizen-Apps, die aussehen wie ein echter Notizblock, vom linierten „Papier“ bis hin zum „Ledereinband“, die über entsprechende Texturen realisiert wurden. Ein Flat Design verzichtet bewusst auf 3D-Elemente, Lichteffekte oder plastisch dargestellte Schaltflächen. Stattdessen zählen hier klare Linien, gut lesbare Schriftzüge mit einem eher eleganten Verlauf und das Spiel mit Farben. Neuerungen, die mit dem Flat Design einhergehen, sind unter anderem:

• freie Auswahl von Schriftarten (Webfonts)
• Gestaltung von Icons mithilfe von Schriftarten (Vektoren), die von jedem Browser ohne Qualitätsverluste skaliert werden können
• kein Einsatz von Hintergrundbildern oder -texturen
• Strukturierung durch farbige Flächen und Schaltflächen
• starke Übersichtlichkeit der Website
• intuitive Navigation
• hohe Usability
• Konzentration auf die Inhalte statt auf das Design
• Verzicht auf kleinteilige Layouts mit zu vielen Bildern

Typische Vertreter von Flat Designs sind zum Beispiel One-Pagers, bei denen sich alle Informationen auf einer einzigen Unterseite befinden – eine häufig gewählte Variante für Firmenwebsites, die ohnehin nur wenige Unterseiten hätten. Auch Supersized Websites, bei denen eine einzige große Grafik und nur eine einzige Aussage im Zentrum der Startseite stehen, sind Teil des Konzepts „Flat Design“.

Beispiele

Noch bevor die Strömung das Flat Designs richtig aufkam, gab es bereits einige große Hersteller, die das Prinzip umsetzten. Hierzu gehört beispielsweise Microsoft mit dem Metro Design von Windows 8, das sich extrem von seinen Vorgängerversionen unterschied. Auch in aktuellen Smartphone Betriebssystemen wie Android oder iOs konnte diese Entwicklung beobachtet werden und nicht zuletzt Smartphone-Apps werden auf diese Art und Weise gestaltet.

Abgrenzung zu Responsive Design

Oft in einem Atemzug mit Flat Design genannt wird das Responsive Design. Beide Begriffe meinen jedoch nicht exakt dasselbe. Responsive Design bezeichnet ein Webdesign, das sich mühelos an unterschiedlichste Browsermodelle anpasst und somit auf einem kleinen Smartphone-Display ebenso wie auf einem 24 Zoll-Monitor ohne Einschränkungen betrachtet werden kann. Das Flat Design hingegen existiert unabhängig vom gewählten Endgerät. Ein Responsive Design ist häufig zugleich auch flach, doch ein Flat Design ist nicht automatisch „responsive“. Dennoch spielt ein flaches Design dem Responsive Design in die Hand. Es verringert die Ladezeiten und ist flexibler auf verschiedene Lösungen anpassbar. Es kann somit ein Teil von Responsive Design sein.

Vorteile von Flat Design

Das Flat Design kommt mit deutlich weniger Gestaltungselementen wie Bildern oder komplexen Effekten aus. Dadurch müssen beim Laden der Website deutlich weniger Daten transportiert werden. Dies wirkt sich einerseits positiv auf die Ladezeiten aus, ist aber für Mobilfunknutzer insbesondere auch in Hinblick auf die Ausschöpfung ihres Datenvolumens sinnvoll. Das Flat Design verhindert, dass Websites zu überladen sind, was dem User die Nutzung erschweren kann.

Nachteile von Flat Design

Nachteilig kann sich auswirken, dass durch den Verzicht auf bestimmte Gestaltungselemente auch der eigene Charakter einer Website verloren gehen kann. Viele Seiten mit umgesetztem Flat Design ähneln sich in Hinblick auf ihren Aufbau und ihre Gestaltung sehr. Der Wiedererkennungswert kann unter Umständen nicht mehr ausreichend sein.

Problematisch kann außerdem die Navigation sein. Dies fällt insbesondere bei kleinen Endgeräten ins Gewicht. Beim Flat Design ist es schwieriger, den Nutzer zu führen, und ihm zu zeigen, wie er auf der Website richtig navigiert. Wird das gelernte Verhalten, das der Nutzer schon auf unzähligen anderen Websites eingeübt hat, nicht sehr konsequent umgesetzt, kann dies im schlimmsten Fall zum Verlassen der Website führen.

Experten gehen sogar davon aus, dass ein Flat Design für einen Onlineshop sogar Conversionverluste bedeuten kann, wenn es zu extrem umgesetzt wird. Das reduzierte Design führt dazu, dass sich Conversion-Elemente nicht mehr richtig vom Rest abheben und vom Nutzer nicht mehr ausreichend wahrgenommen werden können.

Weblinks

• Flat Design – was es ist, warum es bleibt
• Die schlichte Eleganz im Netz – Flat Design
• … und die Welt ward flach! – Ein kritischer Blick auf den Flat-Design-Trend