Ratgeber

Flat-Design: Darauf musst du als Interface-Designer achten

(Screenshot: Agency Survival Kit)

Flat Design hat die Welt vor rund drei Jahren im Sturm erobert. Doch bald zeigten sich Mängel und das Korsett der Flat-Design-Vorgaben erwies sich als zu starr für viele Anwendungen.

Flat Design ist quasi die Auflehnung gegen den Skeumorphismus – also die Nachahmung analoger Materialien und Oberflächen durch Interfaces, wie sie vornehmlich Apple in seinen Software-Designs prägte. Die möglichst detailgetreue Imitation echter Objekte, wie Mülleimer oder Papieroberflächen, sollte – zumindest theoretisch – das Nutzererlebnis verbessern.

Flat Design macht das Gegenteil: Es reduziert das Design auf ein Minimum und rückt damit die Funktionalität nach dem altbewährten Grundsatz „Form Follows Function“ in den Vordergrund. So sucht man bei einem puristischen Flat-Design-Ansatz vergeblich nach dreidimensionalen, Tiefe vortäuschenden Elementen, daher auch der Name.

Dieser Grundsatz findet sich heute in einer Vielzahl von Apps, Web-Apps, Websites und Software-Oberflächen wieder – aber auch in Betriebssystemen wie in Apples iOS ab Version 7 oder Googles Material-Design-Ansatz in Android.

Flat Design 2.0 – die Unterschiede

Trotz des massiven Erfolgs zeigten sich mit der Zeit auch ein paar Nachteile von Flat Design. Obwohl gerade der minimalistische Ansatz das Designkonzept so populär machte, ist er zu streng und kontraproduktiv für eine gute User Experience. Leicht läuft es an den Bedürfnissen der Benutzer vorbei und stellt die coole Ästhetik über ein gut bedienbares Interface. Unter dem selbst auferlegten Druck, alles möglichst „flach“ – also zweidimensional – und auffällig zu gestalten, vernachlässigten einige Designs das gute Nutzererlebnis.

Sie müssen probeweise herumklicken, wobei sie natürlich auch ungewollte Aktionen ausführen und im schlimmsten Fall den Umgang mit jedem Interface neu lernen.


Zu den größten Mängeln des Flat Designs gehört, dass Orientierungshilfen wie Verläufe, Schatten oder Tiefen fehlen, ebenso wie bekannte und etablierte Muster – beispielsweise, dass blaue und unterstrichene Texte Links sind, also klickbare Elemente wie Buttons. Bei so einem komplett flachen Interface können Benutzer nicht entscheiden, welche Elemente eine Aktion auslösen. Sie müssen probeweise herumklicken, wobei sie natürlich auch ungewollte Aktionen ausführen und im schlimmsten Fall den Umgang mit jedem Interface neu lernen.

Flat Design 2.0 will das ändern und lässt sich daher wohl am besten mit „flach und doch irgendwie nicht“ beschreiben. Um diese Wirkung zu erreichen, mischen sich hier die besten Bestandteile der Flat-Design-Ästhetik mit Elementen zur Steigerung der Usability. Im Moment ist das vor allem der Einsatz mehrerer Ebenen, die eine visuelle Z-Achse erzeugen. Hierfür eignen sich subtile Schatten, Highlights und Ebenen.

Papertelevision setzt auf eine stark eingeschränkte Auswahl von Schriftarten und Hero-Images, um dem Design Tiefe zu verleihen. Plastische Icons machen die Gestaltung realitätsnah und helfen bei der Orientierung. (Screenshot: Papertelevision)

Die Parallelen zu Googles Material Design sind unverkennbar. Die 2014 mit Android L veröffentlichte Designsprache befolgt die Hauptcharakteristiken von Flat Design, ergänzt sie mit Hilfe der Z-Achse jedoch um Dreidimensionalität. Die Nachahmung physikalischer Gegebenheiten wie der Trägheit der Masse bei Animationen (ease-in-out) oder dem Kontinuitätsansatz des Material Design liefert beim Flat Design 2.0 die nötige Prise Skeumorphismus, ohne den minimalistischen Ansatz des ursprünglichen Konzepts zu beeinträchtigen.

Typo und Icons

Auch in Sachen Typografie gibt es bei der aktuellen Flat-Design-Version neues: Alles geht hier in Richtung eines Single-Font-Ansatzes. Die gewählte Schriftart ist in der Regel simpel gestaltet und lenkt den Nutzer auf den Inhalt, nicht auf die Gestaltung. Ein gutes Beispiel dafür ist der DropBox-Guide. Die Kombination mit einem Hero-Header gibt einer Website zusätzliche Dynamik und Realitätsnähe, wie etwa die Website von Papertelevision demonstriert.

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Ein Kommentar
JK
JK

Beim Link „Dropbox Business Guide“ fehlt ein http am Anfang!