Drücke die Tasten ◄ ► für weitere Artikel  

… und die Welt ward flach! – Ein kritischer Blick auf den Flat-Design-Trend

Ist Flat Design wirklich die Lösung so vieler Probleme – oder bringt es eher neue mit sich? Unser Gastautor Felix Winkelnkemper wirft einen kritischen Blick auf den Design-Trend und zeigt auf, welche Versprechen er einlösen kann und welche nicht.

… und die Welt ward flach! – Ein kritischer Blick auf den Flat-Design-Trend
Bildquelle: http://designmodo.com/flat-design-principles/

Flat ist im Trend: Endlich sind sie weg die überkandidelten Schnörkel in den Nutzeroberflächen, all die Zierrahmen und Abrundungen. Ausgedient haben auch die Papier- und Ledertexturen, die Glas-Buttons und virtuellen Eselsohren. Stattdessen zieht endlich wieder Nüchternheit ein ins User-Interface-Design. Ein Button braucht keinen Schnickschnack mehr, nicht mehr die bis vor kurzem noch allgegenwärtigen abgerundeten Ecken, keinen Farbverlauf, keine Schattenkanten und, Gott bewahre, schon gar keinen Schlagschatten. Im tritt an seine Stelle eine rechteckige farbige Fläche mit einem einfach gehaltenen Piktogramm und einem prägnanten Text in einer schönen Schrift.

Klar ausgemacht ist der Feind, gegen den sich das neue Design richtet: der Skeuomorphismus. Ich gebe es offen zu, hätte man mich vor einem Jahr gefragt, was ein solcher Skeuomorphismus sei, hätte ich passen müssen. Mittlerweile ist der sperrige Begriff in aller Designer Munde und wer doch noch zu den offenbar wenigen Ahnungslosen gehört, dem erklärt die Wikipedia den Skeuomorphismus als eine Stilrichtung, „bei der Objekte in ihrer Gestaltung ein anderes Material oder eine Form eines älteren, vertrauten Gegenstandes bis hin zur vollständigen, für den Benutzer verwechselbaren Vollendung nachahmt, ohne dass diese durch ihre Funktion begründet ist“. Als ein Hauptprotagonist dieser Designrichtung wurde Apple ausgemacht und tatsächlich strotzen vor allem die noch aktuellen iPad- und iPhone- Oberflächen vor solchen Nachahmungen. Die Notizanwendung beispielsweise sieht aus, als würde sie aus einzelnen linierten Zetteln bestehen, man sieht oben sogar die Abrisskante, direkt unter einem Ledereinband.

In der Tat sind solche Gestaltungselemente aus ergonomischer Sicht problematisch. Weder Abrisskante, digitales Leder noch die Linierung helfen bei der Nutzung der Notizanwendung, ihr visuelles Ablenkungspotenzial ist jedoch enorm. Flat Design verspricht das Ende all dieser Ablenkungen, das ist erfreulich und in zumindest einem weiteren Bereich kann ich dem neuen Trend fast bedingungslos zustimmen: Mit der Abschaffung der Texturen ist auch das Icon-Design von vielem Ballast befreit worden. Hier waren über Jahre komplexeste, unruhige und teilweise nur schwer unterscheidbare Piktogramme im Einsatz. In den Ergonomie-Lehrveranstaltungen an der Universität Paderborn propagieren wir schon länger eine einfachere Gestaltung und jetzt, mit dem Flat Design, sehen wir zunehmend einfache und dennoch gut unterscheidbare, wiedererkennbare Piktogramme. Die Betrachtung des neuen Designs lässt somit hoffen.

Ist Flat Design wirklich der Schlüssel zu ergonomischen Oberflächen?

Beeindruckend ist, wie viele Magazine und Blogs sich des Themas angenommen haben. Noch erstaunlicher ist dabei, mit welcher Bestimmtheit das schöne neue Design vertreten wird. Sogar von einer Revolution ist mitunter die Rede. „Form follows function“ ist das, zugegebenermaßen nicht neue, Motto und da passen visuelle Ornamente (gemeint sind funktionslose Verzierungen) einfach nicht mehr ins Bild. Alles soll leicht erkennbar sein, ganz ohne Ablenkungen. Doch ist ein flaches Design wirklich der Schlüssel zu ergonomischen Oberflächen? Um diese Frage beantworten zu können, muss ich ein wenig ausholen und einen kleinen Ausflug in die Wahrnehmung des Menschen unternehmen, denn darum geht es letztlich: Um die Objekte einer grafischen Nutzeroberfläche erkennen zu können, muss der Mensch sie mit Hilfe seiner Augen und seines Gehirns verarbeiten.

Die Wahrnehmung des Menschen ist angepasst an seine Umwelt. Im Laufe der Jahrtausende der Menschheitsgeschichte waren die Menschen klar im Vorteil, deren Wahrnehmung schnell und effektiv war. Es galt, in der Masse der uns umgebenden Reize schnell auf diejenigen Reize reagieren zu können, die für das schiere Überleben oder das Jagen wichtig waren. Anderes konnte dabei ruhig hintenüber fallen. Der Schnelligkeitsgewinn wird durch einen Informationsverlust erkauft. Die menschliche Wahrnehmung ist daher immer selektiv. Zauberer und Illusionskünstler machen sich das oft zu Nutze. Sie lenken die Aufmerksamkeit auf etwas potenziell Wichtiges und können sich dabei sicher sein, dass uns das, was eigentlich passiert, verborgen bleibt. Die Selektivität fängt dabei schon in der Anatomie des Auges an. Es kann nur in einem sehr kleinen Bereich in der Mitte des Wahrnehmungsfeldes überhaupt scharf sehen, drum herum ist alles unscharf und farblos, dafür aber sehr bewegungsempfindlich, was bei einem herannahenden Raubtier so manchen unserer Vorfahren vor seinem Schicksal als Abendessen bewahrt haben dürfte.

So in etwa kann man sich das Gesichtsfeld eines Menschen vorstellen. Nur ein sehr kleiner Teil ist scharf und farbig.
So in etwa kann man sich das Gesichtsfeld eines Menschen vorstellen. Nur ein sehr kleiner Teil ist scharf und farbig. Passt das zum Flat Design?

Nun haben wir, wenn wir in die Landschaft schauen, hoffentlich nicht den Eindruck, das meiste nur unscharf und farblos zu sehen. Das liegt daran, dass unser Gehirn das, was wir gerade nicht, oder nur schemenhaft, sehen, ergänzt. Das Gehirn muss dafür gewissermaßen raten, wie das Bild zu vervollständigen ist. Anhand dieser Hypothese wird dann gegebenenfalls das Auge bewegt, um das Bild zu vervollständigen. Unsere Gehirne sind an die Umwelt, also an Landschaften auf der Erde, so gut angepasst, dass die Hypothesen meist stimmen. Schauen Sie zum Beispiel in einer Landschaft umher, kann davon ausgegangen werden, dass Objekte, sobald sie aus dem Wahrnehmungsfeld geraten, nicht auf einmal verschwinden oder ausgetauscht werden. Tun sie dies, wie in einem Trick, doch, bemerken sie das meist nicht oder brauchen recht lange dafür – unser Gehirn ist für solche Situationen nicht ausgelegt. Solche Defizite in der Anpassungsleistung fallen immer dann auf, wenn der Mensch Wahrnehmungssituationen ausgesetzt ist, die es in der natürlichen Umwelt nicht gibt.

Bei der Erkennung von Objekten in unserer Umwelt ist es wichtig, ein Objekt im Vordergrund von einem anderen im Hintergrund trennen zu können. Unser Wahrnehmungsapparat ist daher in der Erkennung der Übergänge von Vordergrund zu Hintergrund besonders effektiv und kann in üblichen Situationen den Vordergrund vom Hintergrund trennen, ohne die Szenerie komplett mit dem Auge „erwandern“ zu müssen. Lokale Hinweise im relativ kleinen scharfen Sichtfeld reichen dafür aus. Stellen Sie sich einmal vor, Sie hätten eine Fotografie einer Landschaft vor sich. Sie betrachten aber nicht die ganze Fotografie, sondern haben ein weißes Blatt Papier darübergelegt, in das ein relativ kleines Loch geschnitten wurde. Sie sollen nun sagen, ob in dem Ausschnitt, den Sie sehen, ein Objekt ein anderes verdeckt und, falls dies der Fall ist, welches Objekt vorne und welches hinten liegt. Sie werden schnell ein paar Regeln finden, mit Hilfe derer Sie eine gute Hypothese aufstellen können. Das könnte zum Beispiel so aussehen:

  • Eine Vordergrund-Hintergrund-Verdeckung liegt dann vor, wenn Sie im Bildausschnitt eine Kante, also einen abrupten Farb- oder Helligkeitsunterschied ausmachen können.
  • Die ungesättigtere Farbe liegt im Hintergrund, die gesättigtere im Vordergrund, denn wahrscheinlich ist die Sicht nicht ganz klar und entferntere Objekte erscheinen hinter einer Dunstglocke.
  • Wenn es keinen Dunst gibt, liegt die dunklere Farbe im Hintergrund, die hellere im Vordergrund, denn wahrscheinlich haben Sie das Licht hinter sich. Nahe Objekte sind dann stärker beleuchtet als entfernte.
  • Erkennen Sie einen Schlagschatten, liegt die Fläche, auf die der Schatten fällt, im Hintergrund, die andere im Vordergrund, selbst wenn die Hintergrundfläche heller sein sollte als der Vordergrund.
  • Erkennen Sie eine dunkle Objektbegrenzung, handelt es sich offenbar um eine lichtabgewandte Kante eines Objekts. Da Licht üblicherweise von oben kommt, begrenzt die Kante das oben liegende Vordergrundobjekt.
  • Erkennen Sie eine helle Objektbegrenzung, handelt es sich um eine lichtzugewandte Kante; das Vordergrundobjekt liegt also offenbar unten.
  • Erkennen Sie einen Helligkeitsverlauf, können Sie schließen, von welcher Seite das Licht kommt. Die Regeln 5 und 6 können dann auch auf linke und rechte Objektbegrenzungen angewandt werden.

Sieben einfache Regeln

Wenn Sie weiter überlegen, können Sie für übliche Landschaften noch weitere Regeln finden. Ist etwas blau, ist es wahrscheinlich der Himmel und somit der Hintergrund, ist etwas weiß oder grau und befinden Sie sich im oberen Bereich des Bildes, wird es sich ebenfalls um den Himmel, also um den Hintergrund handeln. Auch Regeln zur Erkennung von 3D-Körpern könnten einem einfallen. Doch selbst die sieben einfachen Regeln reichen schon für viele Ausschnitte. Versuchen Sie es mal mit einem Foto. Sie werden sich wundern, wie oft Ihre Hypothese hinterher stimmt.

Kommen wir wieder zurück zu unserem User-Interface. Auch hier gibt es Objekte, die vor anderen liegen. Buttons, als aktive Objekte, müssen sich irgendwie hervorheben; Hinweismeldungen liegen vor dem Anwendungsfenster und verdecken es teilweise; Eingabebereiche in der Anwendung müssen sich vom Hintergrund absetzen. Nun liegt es nahe, den Nutzer beim Erkennen und Trennen dieser Vordergrund- und Hintergrundobjekte visuell zu unterstützen. Da er ja Augen und ein Gehirn hat, die auf die Wahrnehmung unserer Umwelt gut eingestellt sind, können wir ihm auch hier die gleichen lokalen Hinweise zum Erkennen von Vordergrund und Hintergrund geben:

  • Vordergrund vom Hintergrund durch eine klare Kante, also einen hohen Kontrast, voneinander abgrenzen.
  • Die Hintergrundfläche mit einer weniger gesättigten Farbe versehen als den Vordergrund.
  • Den Vordergrund heller gestalten als den Hintergrund.
  • Vordergrundobjekte mit einem leichten Schlagschatten versehen.
  • Unter der Annahme, dass sich die Lichtquelle oben links befindet (sodass der Lichtverlauf unserer Leserichtung entspricht), die Vordergrundobjekte oben und links mit einer hellen Kante, unten und rechts mit einer dunklen Kante abgrenzen.
  • Durch einen leichten Helligkeitsverlauf andeuten, wo sich die Lichtquelle befindet.
Beispiele für die Unterstützung der Tiefenwahrnehmung durch Sättigungsabstufung oben und Helligkeitsabstufung unten, jeweils unterstützt durch Schlagschatten, Schlagschatten und Helligkeitsverlauf, Konturlinien, Konturlinien und Helligkeitsverlauf.
Beispiele für die Unterstützung der Tiefenwahrnehmung durch Sättigungsabstufung oben und Helligkeitsabstufung unten, jeweils unterstützt durch Schlagschatten, Schlagschatten und Helligkeitsverlauf, Konturlinien, Konturlinien und Helligkeitsverlauf.

Natürlich muss und sollte man nicht all diese lokalen Hinweise auf einmal anwenden. Das Resultat sähe dann fast unnatürlich plastisch und aufdringlich aus. Jeder dieser kleinen Tricks in Maßen angewandt hilft den Nutzern einer Oberfläche jedoch, die Elemente abzugrenzen und in ihrer Anordnung zu erkennen. Sie sind keine überflüssigen visuellen Ornamente, nicht einfach nur Ablenkung oder Zierwerk.

Auf dem Bildschirm eine flache Welt zu gestalten nimmt uns eine der natürlichsten Möglichkeiten, Strukturen zu erkennen, denn in der natürlichen Umwelt gibt es kein Flat Design. Jedes Objekt, das über einem anderen liegt, wirft in der Regel einen Schatten oder hebt sich durch Unterschiede in Helligkeit oder Sättigung ab. Und genau diese Informationen nutzt das Auge zur Erschließung des Wahrnehmungsfeldes. Im verständlichen Kampf gegen virtuelle Leder- und Holztexturen und Oberflächen, die aussehen wie Badarmaturen, fallen dem Flat Design also auch sinnvolle Gestaltungsmöglichkeiten zum Opfer, denn ohne helle und dunkle Kanten, Schlagschatten und Helligkeitsverläufe bleibt nur noch die Abstufung von Helligkeit und Sättigung. Manche Gestalter gehen beim Flat Design sogar so weit, auch diese letzte Rettung der Tiefenwahrnehmung abzuschaffen.  Sie kennen sicher Oberflächen, auf denen Sie schon einmal die anklickbaren Elemente gesucht haben. Früher, als die Welt noch nicht flach war, lag das meist daran, dass auch Elemente, die nicht angeklickt, ausgewählt oder betoucht werden konnten, so aussahen, als wäre dies möglich; einfache Textausgaben oder Bilder sahen etwa aus wie Buttons. Microsoft macht uns momentan in Windows 8 das Gegenteil vor: Man öffne die Charms-Bar, also die Leiste auf der rechten Seite und klicke dort auf Einstellungen. Im unteren Bereich, beschriftet mit „PC-Einstellungen ändern“, findet man dann Einstellungen unter anderem für das Netzwerk. Mehr scheint es nicht zu geben. Ich war sehr erleichtert, als ich feststellte, dass ich nicht der einzige blieb, der diesen Text nur für eine Beschriftung und nicht für eine Schaltfläche hielt.

Die Einstellungen-Seitenleiste links im Original, in der Mitte mit Helligkeitsabstufung, rechts mit zusätzlichem Schlagschatten.
Die Einstellungen-Seitenleiste links im Original, in der Mitte mit Helligkeitsabstufung, rechts mit zusätzlichem Schlagschatten.

Was genau gehört eigentlich zum Flat Design?

Aktive Elemente wie Buttons, aber auch die Bereiche einer Oberfläche, in denen Eingaben getätigt werden sollen, müssen sich „abheben“. Das Wort sagt uns bereits, dass das irgendwie mit der Darstellung räumlicher Tiefe zu tun hat. Natürlich braucht man dafür nicht unbedingt Helligkeitsverläufe und Schlagschatten. Hätten die Designer bei Microsoft den Text einfach auf eine rechteckige Fläche mit etwas hellerem Hintergrund gesetzt, wäre schon vieles besser. Doch ist eine solche Farbabstufung noch flaches Design? Schließlich ist es ja eine Technik zur Darstellung von Tiefe. Schwer zu sagen. Meine Bemühungen herauszufinden, was eigentlich genau zum Flat Design gehört und was nicht, scheiterten bisher. Klar ist, dass man keine Texturen haben will, keine Farbverläufe und keine Schatten. Aber gehören teiltransparente Objekte, durch die man also den Hintergrund noch sehen kann, zum Flat Design? Gehört ein Abdunkeln des Hintergrundes dazu, wenn ein Element im Vordergrund stehen soll? Thematisiert werden diese Techniken zur Schaffung von Tiefe und Orientierung nicht, wohl kommen sie aber in Oberflächen vor, die als Beispiele für Flat Design gelten.

Ein Aspekt des Flat Designs, der, zu meinem Erschrecken, allgemein anerkannt zu sein scheint, ist die Farbauswahl. Egal welchen Artikel oder Beitrag über Flat Design man liest, überall findet man die gleiche Aussage: Farben sollen offensiv verwendet werden: 5 bis 8 helle, gesättigte Farben sind in Ordnung. Während für das Weglassen von Oberflächentexturen oder Schlagschatten noch Begründungen gegeben werden (wenn ich, wie erläutert, auch nicht mit all diesen übereinstimme), wird die Farbwahl nicht mehr kritisch reflektiert oder begründet. Einfachheit und „form follows function“ können als Begründung zumindest nicht mehr herhalten. Freundlich und einladend soll die Farbgestaltung sein. Hier verlassen wir den Bereich ergonomischer Überlegungen und sind auf einem anderen Terrain unterwegs. Doch auch aus dem Gesichtspunkt der Ergonomie gibt es zur Farbe etwas zu sagen. Und wieder muss ich den Spielverderber geben!

Farben – und jetzt meine ich nicht Abstufungen der gleichen Farbe, sondern verschiedene Farbtöne – sind ein schwieriges Gestaltungsmittel, vor allem, wenn stark gesättigte Farben verwendet werden. Sie eignen sich hervorragend, um etwas auszuzeichnen, sodass es aus der Menge von Objekten herausfällt. Sie eignen sich also dazu, die Aufmerksamkeit auf etwas zu lenken. Denken Sie nur an eine Anzeigetafel, auf der ein Straßenbahnnetz angezeigt wird und eine nicht funktionierende Weiche rot aufleuchtet. Sie wissen sofort Bescheid: Hier müssen Sie hingucken, hier ist das Problem. Diese Aufmerksamkeitsleitung geschieht vorbewusst, das heißt, noch bevor Sie auch nur die Chance haben, darüber nachzudenken, sorgt Ihr Wahrnehmungssystem dafür, dass Ihre Aufmerksamkeit gelenkt wird. Farbliche Auszeichnungen sind auch auf grafischen Nutzungsoberflächen üblich, zum Beispiel beim Auswählen mehrerer Dateien, die farblich hinterlegt werden und dann auch mehr auffallen als die nicht markierten, was ja auch der gewünschte Effekt ist.

Farbige Kacheln im Windows-8-Store.
Neuer Trend Flat Design: Farbige Kacheln im Windows-8-Store.

Umgekehrt heißt das, dass Sie sich richtig anstrengen müssen, die Aufmerksamkeit wieder auf etwas anderes zu richten, wenn das farbige Element die ganze Zeit „Hierhin gucken!“ ruft. Schauen Sie sich einmal den Windows-8-Store an: Einige der Kacheln ziehen die Aufmerksamkeit auf sich, schreien einen geradezu an, lenken von den anderen Elementen ab. Ein Farbschema mit 8, okay sagen wir 5, leuchtenden Farben führt zwangsläufig zu Problemen: Es ist schwer, die Farben so auszubalancieren, dass sich nicht eine Farbe in den Vordergrund spielt und ablenkt. Gibt es mehrere auffällige Farben im Ensemble, ist der Benutzer hin- und hergerissen, wird von jeder Seite her angeschrien; und was passiert, wenn jetzt doch mal ein Objekt herausgestellt werden soll unter all den anderen, die sich schon gebärden wie ein Pfau? Mit Farbe bewusst Objekte hervorheben geht nur, wenn die übrigen Objekte farblich zurückhaltend, also idealerweise Ton in Ton gestaltet sind. Hinzu kommen noch optische Probleme wie chromatische Aberration. Licht verschiedener Wellenlängen wird im Auge unterschiedlich gebrochen, was dazu führt, dass zum Beispiel gesättigtes Blau anders fokussiert werden muss als gesättigtes Rot. Stehen die Farben in all ihrer Pracht nebeneinander oder aufeinander, ist immer eine von ihnen unscharf, das Auge muss laufend neu fokussieren, Augen- und Kopfschmerzen sind unvermeidlich.

Ist wirklich alles falsch, was das Flat Design verspricht?

Und nun? Ist, außer den schon angesprochenen Icons, wirklich alles falsch, was das Flat Design verspricht? Natürlich nicht. Im Vergleich mit weit überladenen Oberflächen der jüngeren Vergangenheit wirkt Flat Design erfreulich simpel und aufgeräumt, doch während bis dato zu viele unwichtige Elemente plastisch dargestellt werden, wird im Flat Design zu viel eingeebnet und flach. Das haben auch andere schon entdeckt. Wer im Netz nach Flat Design sucht, findet sofort auch den sperrigen Begriff „Almost Flat Design“, bei dem fast alles flach ist, das ein oder andere Element aber doch mit einem Schlagschatten oder einem leichten Helligkeitsverlauf versehen ist. Andere Designer kritisieren dies, denn eine solche Inkonsequenz sorge für Beliebigkeit und lasse eine klare Gestaltungslinie vermissen.

Solcher Kritik sollten wir uns nicht unterwerfen, wenn es darum geht, eine ergonomische Nutzungsoberfläche zu gestalten. Wenn der aktuelle Design-Zeitgeist etwas empfiehlt, was der natürlichen Wahrnehmung widerspricht, dann sollten wir uns trauen, uns einfach darüber hinwegzusetzen. Denn wer „form follows function“ sagt, dann aber auf eine Art und Weise gestaltet, die ein schnelles, sicheres und ermüdungsarmes Erkennen der Formen nicht unterstützt, der sollte vielleicht besser „form abandons function“ sagen. Doch wer braucht so etwas schon? Nehmen wir uns lieber die positiven Aspekte des Flat Designs und ergänzen sie um unsere eigenen Überlegungen, dann bekommen wir ein einfaches, nicht überladenes Design, das an den passenden Stellen aber die nötigen Wahrnehmungsunterstützungen bereitstellt:

  • Verzichten Sie auf aufwändige Texturen wie Leder oder Holz.
  • Verwenden Sie möglichst wenig verschiedene Farbtöne, sondern besser Helligkeits- und Sättigungs-Abstufungen weniger Farbtöne.
  • Verwenden Sie stark gesättigte Farben, vor allem in einem abweichenden Farbton, nur dann, wenn die Aufmerksamkeit gezielt gelenkt werden soll.
  • Gestalten Sie Objekte, die nicht aktivierbar sind (Bilder, Beschriftungen, Ausgaben...) möglichst flach.
  • Heben sie Objekte, die aktivierbar sind (Buttons, Texteingabefelder, ...) durch optische Hinweisreize ab.
  • Setzen Sie Objekte, die vor anderen liegen, optisch ab, zum Beispiel durch Abdunkeln, und damit visuelles Absenken, des Hintergrundes oder durch Verwendung eines Schlagschattens.
  • Setzen Sie Effekte, die Tiefe erzeugen, sparsam ein. Ein Schlagschatten oder Helligkeitsverlauf muss kaum auffallen, um zu wirken.

Über den Autor

Felix WinkelnkemperFelix Winkelnkemper ist wissenschaftlicher Mitarbeiter der Fachgruppe Kontextuelle Informatik am Heinz Nixdorf Institut der Universität Paderborn und arbeitet dort unter anderem an den Themen Wissensorganisation, Lernunterstützung und Software-Ergonomie. Ziel der Ergonomievorlesungen der Fachgruppe ist die Vermittlung von Gestaltungswissen, das von Technikerinnen und Technikern bei der Entwicklung von technischen Systemen produktiv umgesetzt werden kann.

Weiterführende Links

497 Shares bis jetzt – Dankeschön!

Bewerten
VN:F [1.9.22_1171]
31 Antworten
  1. von Tom Kirschner via facebook am 05.07.2013 (11:16Uhr)

    "Flat" ist einer von dutzenden Stilen die ein Gestalter für eine Lösung verwenden kann.

  2. von Daniel Marz via facebook am 05.07.2013 (11:17Uhr)

    Meinen Geschmack trifft Flat Design überhaupt nicht. Imho ganz grausig.

  3. von Sebastian Niemann via facebook am 05.07.2013 (11:25Uhr)

    Was heißt Lösung von Problemen, es ist halt eine Modefrage oder? Jahrelang hat Apple mit seinem Abbild der Wirklichkeit in digitaler Form den Design Ton angegeben jetzt sind es andere und wer weiß was in 3 - 5 Jahren Modern ist. Ich liebe z.B. Flat Design und habe dieses auch schon angewandt bevor man dem ganzen einen Namen gegeben hat. Für mich gilt nach wie vor weniger ist mehr, und wenn ich die Realität haben will dann bin ich auch in ihr, oder anders ausgedrückt es gibt schon so viel Realität, das brauche ich in meinen Designs nicht auch noch und eine Farbe ist genug.

  4. von Andreas Druschel via facebook am 05.07.2013 (11:29Uhr)

    Einfachheit ist zu bevorzugen. Sie hilft schneller an Informationen zu gelangen. Allerdings gilt es sich immer zu überlegen welche Zielgruppe man damit anspricht und für welches Projekt sich welche Stilmittel eher eignen. Flat Design ist ein Trend der sich allerdings auch auf anderes niederschlagen wird, was ich begrüße. Es wird endlich einfacher dem Kunden auch mal etwas Weißraum zu verkaufen (hoffe ich)

  5. von Christian Brett via facebook am 05.07.2013 (11:33Uhr)

    Sehr interessanter und inspirierender Artikel.

  6. von Gesa MJ via facebook am 05.07.2013 (11:36Uhr)

    Toller Artikel und gut durchdachte Kritikpunkte.

  7. von Michael Koziol via facebook am 05.07.2013 (11:44Uhr)

    Flat wirkt sehr altbacken und zu knallig bunt ist es auch noch - es ist einfach ein Schritt zurück. Als würde man TV wieder in S/W senden

  8. von Jürgen Werner via facebook am 05.07.2013 (11:48Uhr)

    Einfach ist eben nicht so einfach zu definieren

  9. von Jan Reinefeld via facebook am 05.07.2013 (11:56Uhr)

    Erst einmal danke für diesen unfassenden und sehr guten Artikel!
    Meine Meinung zum Flat Design: Ich finde es an sich wirklich hübsch, allerdings leidet halt oft die Usability darunter (wie in dem Windows 8 Beispiel - vielen Dank für den Tipp an der Stelle, das wusste ich ebenfalls noch nicht). Und sobald das passiert ist doch die Frage, ob es mit einem skeuomorphen Design nicht besser/einfacher gewesen wäre? Leder hin oder her - Das hat mich noch nie von irgendetwas abgelenkt oder Buttons nicht auffindbar gemacht...

  10. von Tom am 05.07.2013 (12:55Uhr)

    Sehr guter Artikel! Es ist schön, einmal wissenschaftliche Argumente gegen diesen Modetrend zu erfahren.

  11. von MagentaMannheim via facebook am 05.07.2013 (14:07Uhr)

    Lederoptik als Akzent? Warum nicht. Alle Buttons aus Leder? Lieber nicht. Es ist wie bei der Ernährung: Zuviel von Einem ist eben ungesund.

  12. von Kovah am 05.07.2013 (14:10Uhr)

    Tom Kirschner hat es glaube bereits sehr treffend erfasst: Flat-Design ist lediglich einer von vielen Lösungsmöglichkeiten. Wenn Flat Design für das Projekt passender ist als Skeumorphismus, 3D Effekte und Co, setzt man es ein.

    Was ich aber absolut gruselig finde ist das bunte Wirr Warr, dass von Windows fabriziert wird. Das hat meiner Meinung nach nichts mehr mit Benutzerfreundlichkeit zu tun, wenn dem Benutzer nach 5 Minuten die Augen von den grellen bunten Farben weh tun...

  13. von Petra von Rhein via facebook am 05.07.2013 (16:09Uhr)

    Guter Artikel! Und nein, Flat Design ist wie jede Lösung keine Generallösung. Wär ja auch blöd langweilig...

  14. von imtm2010.com via facebook am 05.07.2013 (18:13Uhr)

    Solange es nicht zu viel Flat ist, passt das schon. Wie mit allem, ist es das Mass, dass entscheidet.

  15. von Hendrik am 06.07.2013 (10:10Uhr)

    Schöne Zusammenfassung und treffende Interpretation.

    Was man vielleicht noch neben der schweren "Fokusführung" bei den (vielen) stark gesättigten Farben hinzufügen könnte ist, dass es bei heterogener Hardware (=> z.B. unterschiedliche Monitore bei PCs) zu Frustation führen kann. Kaum ein Enduser hat einen korrekt kalibrierten Monitor, sprich die Farben sehen überall anders aus. Damit das gewünschte Endresultat zu stande kommt, folgt für den Designer jede Menge finetuning. Sobald man für ein spezielles Device (z.B. iPhone) designed ist das Problem nicht gegeben.

    Was man "Pro"-Flat Design noch anführen könnte wären:
    - schlankerer Code (sowohl HTML als auch CSS)
    - schnellere Renderzeiten (weil u.a. weniger Bilder benötigt werden)
    - verringerte Hostingkosten (ok ist heutzutage whrs kein Thema mehr)
    - Responsive Design lässt sich einfacher umsetzen
    - letztlich auch positive Nebeneffekte beim SEO.

    Unterm Strich also ein guter Trend, man muss aber unbedingt die Usability im Auge behalten und dafür sollte man sich definitiv die im Artikel genannten Punkte genau zu Herzen nehmen.

  16. von Phillip Richter am 06.07.2013 (12:12Uhr)

    Es ist wie so oft im Leben, die Mischung machts. Danke für den schönen Artikel, der das Thema angenehm unaufgeregt analysiert!

  17. von Theo am 06.07.2013 (18:21Uhr)

    Sehr guter Artikel Die goldene Mitte zum jeweiligen Projekt zu finden und nicht den Design Trends zu folgen ist wichtig.

  18. von Mirco Kirsch am 07.07.2013 (11:39Uhr)

    Vielen Dank für den gelungenen Artikel.
    Auch ich finde es interessant und lobenswert Design nicht nur aus einer Geschmacksecke heraus zu beurteilen, sondern belegbare wissenschaftliche Erkenntnisse für eine Beurteilung heranzuziehen.

    Ich persönlich bin weder ein Freund noch Feind des sogenannten Flat-Design und sehe sowohl die Vorteile als auch die Nachteile. Mit meinem Kommentar möchte ich keinerlei Partei für oder gegen das Flat-Design ergreifen.
    Es gibt jedoch eine grundsätzliche positive Entwicklung die das Flat-Design herbeiführt. Viele designtheoretische Abhandlungen befassen sich mit dem Unterschied von Design und Styling. Einige führen diese zwei Positionen auch als Unterschiede beim amerikanischen und deutschen Produktdesign der 50er und 60er Jahre an.
    Neben den technischen Vorteilen, die in anderen Kommentaren bereits erwähnt wurden, reduziert das Flat-Design das Webdesign wieder auf seine wesentlichen Elemente und "verachtet" das "Effekt-Design". Das ist ein deutlicher Qualitätsgewinn für Design. Es könnte dazu führen das Design nicht mehr durch seine Effekte als gelungen wahrgenommen wird, sondern durch eine reine "Designleistung".
    Jede Designrichtung verfällt leider irgendwann in ein Extrem und wird unweigerlich zum Selbtszweck. Dann riskiert Design seine Überzeugung und wird all zu oft uninteressant für einen alltäglichen Nutzen. Hier berührt Design in Teilen die Kunst und ich finde den Weg auch durchaus nützlich und sinnvoll um Grenzen auszureizen. Doch Webseiten sind ja in den meisten Fällen keine Kunstprojekte.

    Eine wesentlichen Antrieb erhält Design von seiner technischen Machbarkeit. Das betrifft alle Design Disziplinen. In den Anfängen des Webdesigns gab es nur eckige Boxen und blaue Links. Vor rund 15 Jahren haben wir Designer die Entwickler zur Weißglut gebracht als wir Webseiten mit runden Ecken und Schlagschatten haben wollten. Weil es "unsauberes" und aufwendiges Programmieren bedeutete. Inzwischen ist es mit CSS technisch unproblematisch und zu einem Standard geworden und für manche Designer kaum noch zu ertragen. Irgendwann muss halt was neues her.


    Am Ende möchte ich einen kurzen Satz bemühen der meine Position deutlicher beschreibt und auch die Praxis wieder in die Diskussion zurückholt.

    Das Gegenteil von gutem Design ist nicht schlechtes Design sondern willkürliches Design. Um die Aussage etwas passender zu machen, kann man willkürlich vielleicht durch dogmatisch ersetzen. Design wird so einseitig und unbeweglich weil man ohne den Nutzen zu hinterfragen auf gelernte Rezepte zurückgreift.
    Es ist also wichtig, wie bereits im Artikel gut beschrieben wurde, zu erkennen ob es einen Nutzen gibt.
    Die Aufgabe von Design ist jedoch nicht nur eine gute Benutzbarkeit zu ermöglichen und modern zu wirken sondern soll auch Emotionen wecken.
    In der Praxis bedeutet das, wenn ein Kunde sich durch ein effektreiches Design besser repräsentiert fühlt und seine Kunden das mit ihm teilen, dann bekommt er ein entsprechendes Design. Grundsätzlich Lederoptiken abzulehnen halte ich somit auch für keine gute Lösung, wenn ich damit Emotionen beim Betrachter wecken kann die gewollt sind.

    Ich finde den Satz von Tom Kirschner eigentlich sehr gelungen und ist deutlich kürzer als mein Kommentar.

  19. von Chio am 07.07.2013 (23:48Uhr)

    "Die Kritiker der Elche waren früher selber welche"

    Wer hatte denn die diversen Leder-Bändchen an jedem (schattenverstärkten) Eck seiner Website? Es waren die, die das Apple Design für das höchste Leitbild aller Zeiten hielten und die Windows-Kacheln für flach und potthässlich. OK, Kacheln werdens wohl nicht, aber dass Apple bald auf "flat" macht, weiß man seit einem Jahr. Im Gleichschritt, Marsch.

    Der Artikel ist SEHR gut und bringt auf den den Punkt, worum es geht: Usability, nicht Kunst. Für Kunst sind Künstler zuständig, und die werden ihre Käufer finden. Für Usability sind Designer zuständig, und die sollten MITdenken.

  20. von mediajunky am 08.07.2013 (11:58Uhr)

    Vielen Dank für den Artikel, der mir aus der Seele spricht! Wie viele Stimmen schon angemerkt haben: Ja, eine Reduktion auf die wesentlichen Elemente ist wichtig. Wenn unter einem neuen Designtrend aber die Usability leidet, geht man wieder ein Stückchen zu weit! Ich glaube, der sehr pure Flat-Ansatz wird sich nur kurz halten – eine Anreicherung mit den im Artikel genannten Elementen wird wieder kommen.

  21. von BastianBBux am 09.07.2013 (14:44Uhr)

    endlich mal kritik! danke! ...
    some cents of mine:
    Ich finde ja z.b. bestimmte schlagschatten ziemlich praktisch, beispielsweise in formularen für das element mit dem focus. grad auf touchpanels (e.g. in der prallen sonne) oder umfangreichen formularen imho eine totale erleichterung um zu sehen wo man grad ist. oder auch leichte glass-effekte bei buttons die sich beim drüberfahren umkehren. das sind imho gute 'eye-catcher' im wörtlichen sinn.
    das problem mit all diesen techniken ist halt, wenn es dann sehr einfach wird, dass halbwegs auf allen browsern anzuwenden, dann macht's jeder depp, und meist zu viel. und dann wird man überflutet. wenn man z.b. auf einer webseite jede überschrift und jeden menüpunkt mit einem schlagschatten versieht dann wird das einfach too much, überhaupt wenn auch noch die browser-eigenen elemente mit schatten und effekten überladen sind, und das auge sieht sich schnell satt und ermüdet.
    wenn es nur der slogan im emotionsbild ist, dann ist's ok.
    ich verstehe ausserdem den begriff 'flat design' eher in richtung schlankes design. das heisst nicht automatisch, dass man auf jeden noch so kleinen effekt, rahmen oder runde ecken verzichten muss. die gaaanz runden ecken (border-radius > 4px) haben mir sowieso nie gefallen.
    und diese total über-designten notzizettel-apps die wie post-its etc .. daherkommen, sind sowieso nur überladen und unpraktisch, da lob ich mir tomboy, das kommt dbzgl. ganz unprätentiös daher.

    alles in allem, könnte man es mit paracelsus sagen: dosis sola facit venenum!

  22. von Startups: Wie man gute Designer für sei… am 18.07.2013 (09:03Uhr)

    [...] ... und die Welt ward flach! – Ein kritischer Blick auf den Flat-Design-Trend – t3n News [...]

  23. von Dark Patterns: So erkennst du absichtlic… am 24.07.2013 (14:48Uhr)

    [...] … und die Welt ward flach! – Ein kritischer Blick auf den Flat-Design-Trend – t3n News [...]

  24. von Ikonica: Mach deine Icons fit für iOS 7… am 25.07.2013 (10:16Uhr)

    [...] … und die Welt ward flach! – Ein kritischer Blick auf den Flat-Design-Trend – t3n News [...]

  25. von Flat-Design: 7 kostenlose Icon-Sets für… am 26.07.2013 (06:01Uhr)

    [...] ... und die Welt ward Flach. Ein kritischer Blick auf Flat Design – t3n News [...]

  26. von Meine Lesetipps: Juli mit 78 Links &raqu… am 30.07.2013 (10:32Uhr)

    [...] … und die Welt ward flach! – Ein kritischer Blick auf den Flat-Design-Trend: Flat Design ist im Trend: Endlich sind sie weg die überkandidelten Schnörkel in den Nutzeroberflächen, all die Zierrahmen und Abrundungen. Ausgedient haben auch die Papier- und Ledertexturen, die Glas-Buttons und virtuellen Eselsohren. – by Felix Winkelnkemper – http://t3n.de/news/welt-ward-flach-kritischer-478460/ [...]

  27. von iOS 7: Fast alle Entwickler passen ihre… am 05.08.2013 (10:18Uhr)

    [...] also die Verwendung von älteren, vertrauten Formen und Oberflächen. Stattdessen wurde auf den Flat-Design-Trend gesetzt. So werden klare, einfache Linien in Zukunft beispielsweise Leder oder Holz nachempfundene [...]

  28. von Infografik: Design-Trend Flat-Design … am 13.08.2013 (17:34Uhr)

    […] Mit Vor- und Nachteilen des Flat Designs befasst sich ausführlich und sehr lesenswert der Artikel … und die Welt ward flach! – Ein kritischer Blick auf den Flat-Design-Trend von unseren Kollegen bei […]

  29. von sarah_flieger am 20.11.2013 (14:50Uhr)

    Bedienbarkeit sollte oberstes Gebot sein und da finde ich ist das Flat Design ein Schritt in die richtige Richtung

  30. von Flat Design näher betrachtet - Der visu… am 16.01.2014 (12:15Uhr)

    […] Winkelnkemper setzt sich in einem Artikel kritisch mit dem Thema auseinander und plädiert für einen gesunden Mittelweg, den andere bereits […]

Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema Flat Design
Flat Design: So könnte OS X Mavericks aussehen
Flat Design: So könnte OS X Mavericks aussehen

Der Designer Stu Crew hat ein interessantes Designkonzept zu OS X Mavericks vorgelegt. Dabei folgt er dem Flat-Design-Trend, der sich schon in Apples iOS 7 manifestiert hat. » weiterlesen

Flat Design: 15 User-Interface-Kits zum Download
Flat Design: 15 User-Interface-Kits zum Download

Flat Design ist ein klarer Trend für 2013. Mit diesen User-Interface-Kits erstellen Webworker Apps und Webseiten im Flat-Style. » weiterlesen

Großer Rollout: Google Analytics im Flat Design
Großer Rollout: Google Analytics im Flat Design

Google hat mit dem Rollout eines Redesigns von Google Analytics begonnen – ganz modern im Flat Design. Wir zeigen euch die Unterschiede im Vorher-/Nachher-Vergleich. » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n-Newsletter
Top-Themen der Woche für Web-Pioniere
Jetzt kostenlos
anmelden
Diesen Hinweis verbergen