Flaches Design hat die Design-Welt in den wenigen Jahren, in denen es existiert, im Sturm erobert, aber keine Design-Bewegung bleibt immer 100% ig für ihre Wurzeln und Ideale. Das ist genau das, was mit flachem Design passiert: Es hat allmählich subtile, wenn auch bedeutsame Änderungen seiner ursprünglichen Iteration erfahren.

Diese Änderungen waren genug, um Beobachter und Experten dazu zu bringen, die neue Iteration als Flat Design 2.0 zu verwenden. 2.0 ist sehr interessant, weil es die feine Balance zwischen gerade genug Änderungen trifft, um das Benutzererlebnis zu ändern und seinen ursprünglichen Prinzipien treu zu bleiben.

Die Entwicklung von Flat in 2.0 war jedoch unvermeidlich: Als die Designer sich mit Flat vertraut machten, konnten sie sehen, dass bei all seiner Popularität Einige Probleme wurden nicht richtig behandelt . Und jetzt haben wir 2.0, um einige dieser Mängel zu beheben.

Ursprünge des flachen Designs

Betrachten Sie flaches Design als eine Art Rebellion gegen den damals populären Design-Stil von Skeuomorphismus . Dabei wurden 3D-Effekte verwendet, um die tatsächlichen Eigenschaften von 3D-Objekten zu kopieren, um die Benutzerfreundlichkeit zu erhöhen. Zum Beispiel gab es in den ersten Iterationen von Amazonas Kindle Fire ein 3D-Bücherregal im Hintergrund, um den Zweck des Tabletts zum Lesen zu unterstreichen.

001

Als Apple, ein großer Befürworter des skeuomorphen Designs, im Jahr 2012 beschloss, den Skeuomorphismus aufzugeben, kündigte er einen vollen Schwung an, der in den letzten Jahren sehr populär war. Seine Betonung des Minimalismus hat auch dazu beigetragen, es zu seiner gegenwärtigen Allgegenwärtigkeit voranzutreiben.

Die Wohnung ist gekennzeichnet durch das Fehlen von:

  • angehobene Elemente, die den Benutzern signalisieren, dass sie angeklickt werden können;
  • leere oder versenkte Elemente, die den Benutzern signalisieren, dass sie gefüllt werden können (Suchfelder und andere Eingabefelder).

Übergang zu 2.0

Trotz des Erfolges der Wohnung, begannen einige Designer, legitime Fehler zu bemerken, die in der Design-Community nicht angesprochen wurden. Während die Wohnung durch den willkommenen Minimalismus viel Dampf erhielt, ging es in der strengen Richtung etwas zu weit. Die Eigenschaften einiger 3D-Effekte erwiesen sich als übermäßig und beeinträchtigten die Benutzererfahrung.

So war es unvermeidlich, dass eine andere Änderung auftreten würde. Dort sind wir heute mit dem Beginn des Flat Design 2.0.

Flat Design's Usability-Probleme

Alle Usability-Probleme von flat lassen sich in der folgenden Aussage zusammenfassen: Flat handelt in der Regel mit den Bedürfnissen eines Nutzers nach hüftästhetischen Gesichtspunkten.

Mit anderen Worten, Designer, die für eine Schnittstelle entwerfen, die "flach" ist, legen mehr Wert darauf, die Dinge minimal, nicht-3D und dynamisch / fett zu halten, anstatt die Benutzerfreundlichkeit an erster Stelle zu stellen. Das ist normalerweise der Punkt, an dem alle schlechten Dinge in der Designwelt beginnen, und deshalb hat sich Flat zu 2.0 entwickelt.

Hier sind die üblichen Usability-Probleme mit Flat:

  • Abwesenheit von wichtigen Signifikanten (Farbverläufe, Schatten, Unterstreichungen usw.);
  • Fehlen bekannter Muster (blau, unterstrichener Text für Links usw.);
  • Fehlen kontextueller Hinweise (CTA-Platzierung, verwertbare Kopie, etc.).

Das vielleicht berüchtigtste Beispiel in letzter Zeit für alle Usability-Probleme von Flat war Microsofts Veröffentlichung von Windows 8 mit der so genannten Metro UI. Dieses Design war der Inbegriff von flach, weil alles extrem flach war.

002

Das User Experience war so schlecht Denn ein komplett flaches Design bedeutet, dass den Benutzern nicht die nötigen Hinweise gegeben werden, um ihnen zu sagen, was geklickt werden kann und was nicht an einer Schnittstelle möglich ist. Infolgedessen sind die Benutzer natürlich gezwungen, zusätzliche Zeit damit zu verbringen, dies durch Experimente herauszufinden, oder noch schlimmer, sie führen Aktionen aus, die sie gar nicht wollen!

Wie Sie sehen können, ist der Windows 8-Bildschirm so flach, dass es für die Leute unmöglich ist zu sagen, was zu klicken ist und was nicht. Selbst wenn die Benutzer bereits mit der grundlegenden Websitenavigation vertraut sind, bedeutet dies nicht, dass es sinnvoll ist, alle Signifikanten (Hinweise, die den Benutzern mitteilen, dass sie mit Seitenelementen interagieren können) und Hinweise auf Affordances (Hinweise darauf, wie Benutzer interagieren können) zu entfernen Seitenelemente).

Tolle Beispiele für Flat Design 2.0

2.0 ist eine subtile Änderung oder Verbesserung gegenüber der Ebene, so dass es möglicherweise mehr Konzentration braucht, um echte 2.0 in Websites und Schnittstellen zu erkennen. Deshalb führen wir Sie durch einige aktuelle, große Beispiele für 2.0, die bereits in vollem Betrieb sind.

Der Dropbox-Leitfaden

Dropbox-Anleitung mag auf den ersten Blick wirklich flach aussehen, aber wenn Sie genauer hinsehen, werden Sie 3D-Vorschläge sehen, die den Benutzern klar vermitteln, dass einige Elemente gegenüber anderen erhöht sind. Dies ist vor allem in Bildern des Kopfes des Jungen (auf der linken Seite) und der Schraubenzieher (auf der rechten Seite) deutlich. Beide Bilder haben starke, wenn auch subtile, schwarze Ränder, die Tiefe und den Eindruck vermitteln, dass sie auf dem Hintergrund sitzen, anstatt sich damit zu vermischen.

003

Tolia-Eiscreme

Tolias Seite ist voll von subtilen, erhabenen Effekten, die den deutlichen Eindruck von 3D vermitteln, während das Gesamtdesign immer noch flach und minimal ist. Der erhobene Eindruck ist in der Überschrift, der Unterüberschrift und der Beschreibung (dh der Seitenkopie) vorhanden. Es ist auch in der Call-to-Action-Schaltfläche und der CTA-Kopie in der Schaltfläche vorhanden. Sie können der subtilen Verwendung feiner Schatten rund um die Kanten dieser Elemente danken, um diesen erhabenen Eindruck zu vermitteln.

004

Google Santa Tracker

Es überrascht nicht, Google ist auf dem 2.0-Zug, und seine Weihnachtsmann Tracker Seite zeigt, wie man 2.0 auf unterhaltsame und nützliche Weise integrieren kann. Die Feinheiten von 2.0 gibt es auf der Seite, von den Farbverläufen und Schatten auf den verschiedenen Gebäuden und Pop-up-Bubbles (wenn Nutzer auf ein Gebäude schweben) bis zum 3D-Eindruck der Überschrift am oberen Seitenrand.

005

Publicis-Gruppe

Publicis Groupes Die Seite zum 90-jährigen Jubiläum kann sich auf eine ziemlich offensichtliche Weise mit 2.0 beeinflussen. Wenn Sie auf die linke Seite der Seite schauen, sehen Sie die Kombination aus Schatten und Farbverläufen, die nach unten kommen und vom blassen Kreis und dem darunter liegenden blauen Bereich ausgehen. Der strenge Minimalismus zeigt auch, dass seine Designästhetik immer noch stark in der reinen Wohnung verwurzelt ist.

006

Jumeirah

Diese Seite Für ein Luxushotel in den Vereinigten Arabischen Emiraten dominiert meist ein riesiges Video im Hintergrund, doch lassen Sie sich davon nicht ablenken von der Subtilität seines 2.0 Beitrags. Die Überschrift "Jumeirah Inside" zeichnet sich durch eine ach so subtile Schattierung aus, die erfolgreich den Eindruck von 3D vermittelt und dennoch den flachen Gesamteindruck erhält.

007

Eine Evolution durch Nachfrage

In der Designwelt ändern sich die Dinge normalerweise, weil Nachfrage besteht. Jemand wird merken, dass etwas fehlt und einen Weg finden, Dinge zu verbessern, oder jemand anders wird ein Konzept nehmen und es auf eine andere Ebene bringen, die logisch auf einem bestimmten Konzept aufbaut.

Was 2.0 betrifft, ist es definitiv eine Kombination aus beidem, da die Usability-Lücken von flat durch die Erweiterung des ursprünglichen Konzepts auf eine Art und Weise, die immer noch die Prinzipien des Minimalismus respektiert, die durch die Wohnung definiert sind, behoben werden.