Flaches Design, iOS 7, Skeuomorphismus und all das

Der Begriff des flachen, "digital authentischen" Designs ist in letzter Zeit ein beliebtes Thema für Gespräche und Kontroversen, insbesondere mit den Bemühungen von Apple, Microsoft, Google und deren Flaggschiff-Betriebssystemen. Dezente Farben, leichte Typografie und andere Gemeinsamkeiten des modernen flachen Designs haben alle eine funktionierende Rolle bei der Konstruktion neoterischer Designtrends gefunden, die wir alle lieben (oder hassen). Wir werden uns diese Trends in diesem Artikel ansehen, um zu sehen, worum es bei dem ganzen Trubel geht.


Skeuomorphismus: Uneben

Während viele Details der Theorien, aus denen das Konzept eines flachen, digital authentischen Designs besteht, überzeugt ist, ist eines sicher: Es wurde als Teil einer viel willkommenen Abkehr vom skeuomorphen, metaphorischen Design entwickelt.

Skeuomorphismus ist der Begriff, den wir für einen Trend verwenden, im Wesentlichen etwas Neues zu entwerfen, während die Themen von etwas Älterem und Etablierterem beibehalten werden. Skeuomorphismus existiert in vielen verschiedenen Branchen - Architektur ist ein häufig zitiertes Beispiel -, aber im Zusammenhang mit Web- und Software-Design kennen wir Skeuomorphismus in erster Linie als Technik der Verwendung von Metaphern, um Vertrautheit zu erzeugen.


Moody PSD-Schnittstelle für Tuts+

Ich habe vor zwei Jahren einen Artikel über Metaphern im Webdesign geschrieben, und das Kernkonzept ist immer noch anwendbar. Metaphern unterschiedlicher Größenordnung werden eingesetzt, um digitale Handlungen und Ideen mit denen der realen Welt zu vergleichen. Skeuomorphismus ist im digitalen Design bereits seit der Geburt der grafischen Benutzeroberfläche offensichtlich, um die Lernkurve der Befehlszeilen-basierten Benutzeroberfläche zu bekämpfen. Diese reicht von der einfachen Implementierung von Symbolen, die an eine Diskette erinnern, über einen Papierkorb bis hin zur vollständigen Abbildung von Büchern und ein Radio, für das Apple bekannt ist.

Wenn Sie im Web eine Schaltfläche sehen, ohne dass Sie auf eine Schaltfläche geklickt haben, wissen Sie, dass aufgrund ihres Designs etwas zu tun ist, ähnlich wie Sie instinktiv davon ausgehen, dass eine Nachricht schlecht ist, wenn sie rot dargestellt wird.


Von den Prinzipien von Pete Orme für erfolgreiches Button-Design
Du weißt was zu tun ist…

Skeuomorphismus wurde verwendet, um den Neulingen einer Plattform zu helfen, die Seile zu erlernen und mit minimalem Unterricht herumzukommen. Flaches Design ist ein Trend hin zu einer Philosophie, die frei von überflüssigen Elementen und der Entstehung eines subtileren Designs ist, das der Plattform selbst entspricht.


Die BBC-Sprache für globale Erfahrungen

Unabhängig davon, ob Sie Windows oder OS X, Android oder iOS verwenden, verwenden Sie wahrscheinlich etwas, das mit diesen Philosophien entworfen wurde, oder warten auf ein Update, um sie einzuführen.


Die Großen

Es gibt viele Beispiele für flaches Design, aber um die heutigen Konzepte beispielhaft darzustellen, werden wir uns auf die Bemühungen von Microsoft, Google und Apple konzentrieren, da sie eine große Reichweite haben. Da jedes dieser Unternehmen über eine Reihe von Plattformen und Assets verfügt, sind sie auch einige der wahrscheinlichsten Kandidaten, die signifikante Stilrichtlinien aufgestellt haben, die wir untersuchen können, um deren Interpretation des flachen Designs zu simulieren.

Microsoft

Microsoft entschied sich für eines der radikalsten und kontroversesten Redesigns der letzten Zeit mit Windows 8. Die Erstellung der früher als Metro bekannten Designsprache (jetzt als Microsoft Design Language bekannt, wobei der frühere Begriff jedoch noch umgangssprachlich verwendet wurde) wurde erstmals in gesehen weit verbreitete Anwendung mit Windows Phone (es gab auch Zune, aber je weniger davon gesagt wurde, desto besser, aber da es das Gründungsdesign der Plattform war, war es nicht so schlimm. Es war an der Veröffentlichung von Windows 8 für 2012, dass es wirklich zu Kontroversen kam.

Bei dieser Kontroverse ging es nicht so sehr um das Design selbst, sondern um die radikale Änderung grundlegender Konzepte, die mit Windows in Verbindung gebracht wurden, wie das Startmenü, das zu einem eigenen Skeuomorph wurde - aber mit allen Mitgliedern der Webdesign-Community In den Mainstream-Medien, die sich mit dem Spiel beschäftigten, wurde das Design und damit Metro als Designsprache in Frage gestellt.

Da Microsoft schon lange ein flaches, authentisches Design vertrat, sind seine Prinzipien wahrscheinlich die am weitesten entwickelten und etablierten. Microsoft definiert Metro als vier Grundprinzipien: Typografie, Bewegung, Inhalt nicht Chrom und Ehrlichkeit. Ich habe letztes Jahr über diese Prinzipien geschrieben, aber hier ist eine Zusammenfassung:

  • Die Einrichtung einer visuellen Hierarchie durch die Merkmale von Typografie, Verwendung als Basis für ein Layout und dessen Navigation ohne Verwendung überflüssiger grafischer Funktionen
  • Das Bewegung Die Fließfähigkeit und Leistung eines Designs ist für die Ästhetik eines Designs ebenso wichtig
  • Putten Inhalt, nicht Chrom, Im Vorfeld konzentrieren Sie sich stärker auf den eigentlichen Inhalt und ermöglichen die geeignete Skalierung von Designs
  • "Authentisch digital" sein und halten Ehrlichkeit Die Tatsache, dass der Verbrauch des Designs digital ist, lässt das Design von Offline-Objekten offline

Weitere Informationen zu diesen Prinzipien finden Sie unter Emulieren der Metro Design Language von Microsoft.


Die von Paravel Inc.

Google

Mit der Veröffentlichung von Android 4.0 Ice Cream Sandwich begann Google auch, eine eigene interne Designsprache, Holo, zu etablieren. Holo hat einige definierte Prinzipien, aber da sie sehr spezifisch an das Anwendungsdesign gebunden sind, sind sie nicht so universell anwendbar wie die von Microsoft. Android 4.x erinnert jedoch visuell an viele der gleichen Ideale wie die Windows-Familie, mit leichter Typografie, monochromen Symbolen außerhalb des Startbildschirms und einem gedämpften, aber universellen Farbschema.

Apfel

Während Google und Microsoft große Änderungen an ihren Design-Sprachen vorgenommen hatten, hielt Apple seine skeuomorphen Prinzipien durch mehrere Generationen seines Betriebssystems an. Das hat sich erst vor wenigen Monaten mit der Ankündigung von iOS 7 geändert und die Gestaltung des Betriebssystems drastisch verändert. Die Icons sind flacher, die Typografie ist leichter und die Metaphern sind out.

Dies ist besonders deutlich bei iOS, wenn Sie die aktuelle Iteration der Rechner-App mit ihrem iOS 7-Gegenstück vergleichen. Diese spezielle App ist vom Versuch, einem physischen Gerät mit durch Farbverlaufshintergründe gekennzeichneten Schaltflächen zu ähneln, zu einem völlig flachen Design übergegangen, unabhängig von unnötigen Metaphern.


Flach und leise gestalten

Flaches Design ist kein Trend, über den wir im Nachhinein schreiben, sondern ein Trend, der konsequent weiterentwickelt und etabliert wird. Aus diesen Gründen ist es schwierig, die genauen Eigenschaften des flachen Designs wirklich zu definieren, aber wir können uns wenigstens einige der häufigsten Themen ansehen.

Minimalismus

Minimalismus ist aus verschiedenen Blickwinkeln ein Schlüsselprinzip für flaches Design. Microsofts Content- und nicht Chrome-Philosophie ist dieser Tatsache sehr treu, was nahe legt, dass überflüssiges "Chrome" - die zusätzlichen Oberflächenelemente, die nicht der Kerninhalt der Seite sind - minimal sein sollten und praktisch nicht vorhanden sind, wenn dies nicht notwendig ist. Die Verwendung der Typografie und der daraus entstandenen visuellen Hierarchie ist der Schlüssel für die erfolgreiche Ausführung dieser Art von minimalistischer Benutzeroberfläche, auf die wir später eingehen werden.

Eine gesunde Nutzung von negativen Flächen, Rändern und Polsterungen trägt ebenfalls zum Gesamtgefühl einer flachen Gestaltung bei, wobei Abstandselemente anstelle der Details verwendet werden, die sie einst auszeichneten.


Das aktuelle Symbol von Safari links und die flache Version von .app.icns. Letzteres verzichtet auf falsches Licht, Schrägen und andere Details, um eine attraktive Alternative zu schaffen, während die Kompassmetapher erhalten bleibt.

Minimalismus gilt jedoch nicht nur für Designs in ihrer Gesamtheit. Vielmehr ist der Schlüssel für ein flaches Design der Minimaleffekt in den einzelnen Elementen Ihres Designs, wobei auf zusätzliche Effekte wie Schatten, Beleuchtung, unnötige Farbverläufe und dergleichen verzichtet wird. Stattdessen gilt als Faustregel, dass alle Elemente, wie der Name schon sagt, flach aussehen sollen, ohne durch Abschrägung und andere Effekte entstehende Fake-Tiefe. Dies ist eine völlig andere Herangehensweise an das Web-Erlebnis, das wir normalerweise in nicht benötigter Verzierung verwenden.

Typografie

Typografie ist ein Schlüsselelement für flaches Design, und erfolgreiche typografische Entscheidungen können zu einer erfolgreichen Ausführung der gesamten Designtheorie führen. Da, wie im letzten Abschnitt besprochen, ein großer Teil des flachen Designs davon abhängt, zusätzliche Verzierungen und nicht mehr benötigte Details zu entfernen, führt dies dazu, dass Typografie im Allgemeinen eine führende Rolle in der Form der gesamten Seite spielt.


Da die Typografie in der visuellen Hierarchie einer Seite eine fundamentale Rolle spielt - oder zumindest mehr als in herkömmlichen Designs -, ist die Auswahl und Verwendung der richtigen Schriftart eine große Entscheidung. In vielen flachen Designs wird Sans-Serif in der Regel vorwiegend im Spiel gefunden, da Serifen selbst unnötige Verzierungen und ein Zeichen von Formalität und nicht von Modernismus sind. Von diesen serifenlosen Schriften suchen Sie nach Schriftarten, die in verschiedenen Gewichtungen verfügbar sind, so dass nur eine oder zwei Familien erforderlich sind, um die gesamte Hierarchie Ihres Designs zu füllen, um das minimalistische, einfache Gefühl zu bewahren.

Eine Kombination aus effektiver Nutzung von negativem Platz und einer gut ausgewählten Schriftfamilie kann Ihren Text zu einer effektiven Grundlage für Ihr Design machen, und Schnittstellen wie Windows 8 sind ein Beleg für dieses Funktionieren. Erstellen Sie einen sauberen Schnitt, flache Typografie und Ihr Design wird folgen.

Farbe

Die Prinzipien des flachen Designs können auf die meisten Farbschemata Ihrer Beschwörung angewendet werden. Es gibt jedoch einen sich entwickelnden Trend in der Farbtheorie, der neben der Einführung des flachen Designs entsteht.


flatuicolors.com

In jeder Literatur zum Thema, die in vielen Beispielen für flaches Design gezeigt wird, gibt es einen starken Trend: Designer verwenden die flache Designbewegung, um hellere Farben in einer höheren Frequenz einzufügen als nur eine oder zwei Farben in einer Handvoll Farbtönen.

Sie können zwar flaches Design mit Graustufen mit Akzentfarbe verkörpern, aber durch das Anwenden neuer Farbtrends und das Erstellen einer hellen, vielfältigen Palette können Sie einen wichtigen Kontrast erzeugen und Effekte erzeugen, die nur mit Farbverläufen, Schatten und anderen abgehenden Verzierungen konkurrieren. Mehrere helle, kräftige Farben kennzeichnen flaches Design.

Geräteagnostiker

Da das Internet auf mehr Geräten verbraucht wird als je zuvor, entsteht ein ansprechendes, leichtes und mobiles Design mit flacher Bauform. Du nicht brauchen Um ein responsives Layout zu erstellen, um ein starkes Beispiel für flaches Design zu erstellen, machen Aspekte wie saubere, skalierbare Typografie und flache, vektorbasierte Ikonografie dies einfacher als je zuvor.

Wir haben das responsive Design ausführlich behandelt und es gibt viele andere Ressourcen rund um das Web, die Ihrem Interesse am Entwurf für die Skalierung von Geräten entgegenkommen. Das Erstellen eines responsiven Designs, das Minimalismus mit starker Typografie verkörpert und die Abhängigkeit von überflüssigen Texturen und Effekten reduziert, wird Ihren Benutzern danken und Ihre Arbeit als maschinenunabhängig fördern.


Trends sind Trends

Flaches Design ist ein Trend und keine Anforderung für das Web. Während viele wichtige Akteure im Bereich Webdesign und -technologie auf flach-zentrierte Designs zugehen, bedeutet dies nicht, dass jedes Projekt dies tun muss oder dass die Ästhetik für jedes Szenario passt. Trends kommen und gehen; Es gibt eine Geschichte voller einst populärer Design-Ethik, an die es sich nicht mehr zu denken lohnt (erinnern Sie sich daran, wann Zelte all die Wut hatten?)

Trends sind flüchtig und wenn man ihnen wie eine Bibel folgt, bleibt man mit der Zeit zurück.

Harrison Weber

Mit immer mehr großen Namen, die sich für das flache Design anmelden, scheint es ein natürlicher Schritt zu sein, auf den Zug des aktuellen Trends aufzusteigen. Es ist jedoch wichtig, dass Sie das Potenzial Ihrer Designs nicht einschränken, da Sie versuchen, kühl und auf dem neuesten Stand zu bleiben. Behandeln Sie stattdessen jedes Projekt anders und übernehmen Sie nur die Merkmale dieses bestimmten Trends, die Sie für angemessen halten. Flaches Design mag populär sein, aber es ist kein Gesetz und sollte keine Grenze für großartiges Design sein.

Wir könnten im nächsten Jahr radikal andere Trends sehen, aber wenn Sie sicherstellen, dass Sie geeignete Entscheidungen treffen und nicht verwenden diese Die Richtung des Jahres als starre Vorlage sollte Ihr Projekt für viele Jahre gut sein.


Fazit

Wenn flaches Design zu Ihrem Projekt passt, kann Ihre Kreation großartig sein. Die Kombination kräftiger Farben, schlanker Typografie und minimalistischer Aura, die frei von einer falschen dritten Dimension und anderen unnötigen Verzierungen ist, kann ebenso effektiv wie effizient sein.

Es besteht kein Zweifel, dass die Entstehung eines flachen Designs weitgehend eine Reaktion auf den Skeuomorphismus ist. Sehen Sie sich die Verschiebung von Apple von iOS 6 zu iOS 7 an. Flaches Design ist wie erwachsene Skeuomorphsim, da sie wissen, dass die Mehrheit der Internetbenutzer jetzt versteht, dass eine Schaltfläche zum Drücken dient, ohne dass eine Abschrägung wie eine Schaltfläche erscheint, die Sie im wirklichen Leben drücken können. Flaches Design ist ein unabhängiges Konzept, das überraschend komplex sein kann, bei guter Ausführung jedoch zu schönen Designs über Plattformen hinweg führen kann.


Lesen Sie weiter

Weil Sie nicht genug über flaches Design gelesen haben…

  • Das Flat Design Era von Layervault
  • Flaches Design eignet sich hervorragend für mittelmäßige Designer wie mich von Jonathan Libov
  • Flaches Design und Skeuomorphismus von Sven Lenaerts
  • Damit es funktioniert: Flaches Design und Farbtrends von Carrie Cousins
  • fltdsgn.com
  • Flaches Design wirft einen langen Schatten von Ben Moss
  • flaticons.net
  • skeu.it So lange und vielen Dank für all die hölzernen, mit Scotch verklebten, in Leder genähten Fische mit Leinenrücken
  • iOS 7 Design auf apple.com
  • iOS 7 Icon Guides PSD von Alexander Obenauer
  • Präsentieren Sie Ihre Web-Mockups mit zusätzlichem 3D-Flair von Taras Kravtchouk
  • Der Tod eines flachen Designs von dem dänischen Ali Mughal
  • Vergessen Sie flaches Design. Verbringen Sie Ihre Zeit damit, etwas Schönes von Harrison Weber zu machen