Flaches Design, iOS 7, Skeuomorphismus und das alles

Der Begriff des flachen, "digital authentischen" Designs war in letzter Zeit ein beliebtes Theme für Gespräche und Kontroversen, insbesondere im Hinblick auf das Software-Design von Apple, Microsoft, Google und ihren jeweiligen Flaggschiff-Betriebssystemen. Subtile Farben, helle Typografie und die anderen Gemeinsamkeiten des modernen flachen Designs haben alle eine funktionierende Rolle bei der Konstruktion der neoterischen Designtrends gefunden, die wir alle lieben (oder hassen). Wir werden uns diese Trends in diesem Artikel ansehen, um zu sehen, worum es in der ganzen Aufregung geht.

Skeuomorphismus: Unflach

Während viele Besonderheiten der konstituierenden Theorien, die das Konzept des flachen, digital authentischen Designs bilden, eines sicher ist: Es wurde als Teil einer sehr willkommenen Abkehr vom skeuomorphen, metaphorischen Design entwickelt.

Skeuomorphismus ist der Begriff, den wir für einen Trend verwenden, im Wesentlichen etwas Neues zu entwerfen und dabei die Themen von etwas Älterem und Etablierterem beizubehalten. Skeuomorphismus gibt es in vielen verschiedenen Branchen - Architektur ist ein oft zitiertes Beispiel -, aber im Kontext des Web- und Software-Designs kennen wir Skeuomorphismus hauptsächlich als die Technik, Metaphern zu verwenden, um Vertrautheit zu induzieren.

Ich habe vor ungefähr zwei Jahren ein Stück über Metaphern im Webdesign geschrieben und das Kernkonzept ist immer noch anwendbar. Metaphern unterschiedlicher Größenordnung werden verwendet, um digitale Aktionen und Ideen mit realen Gegenstücken zu vergleichen. Skeuomorphismus ist im digitalen Design seit der Einführung der grafischen Benutzeroberfläche erkennbar, um die Lernkurve der befehlszeilenbasierten Benutzeroberfläche zu bekämpfen. Diese reicht von der einfachen Implementierung von Symbolen, die an eine Diskette und einen Papierkorb erinnern, bis hin zur vollständigen Illustration von Büchern und Büchern ein Radio, für das Apple bekannt ist.

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

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

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

Coole Guys

Es gibt viele Beispiele für flaches Design, aber um die heutigen Konzepte zu veranschaulichen, konzentrieren wir uns auf die Bemühungen von Microsoft, Google und Apple aufgrund ihrer kollektiven Reichweite. Da jedes dieser Unternehmen eine Reihe von Plattformen und Assets leitet, sind sie auch einige der wahrscheinlichsten Kandidaten, die wichtige Stilrichtlinien festgelegt haben, die wir untersuchen können, um ihre Interpretation des flachen Designs zu emulieren.

Microsoft

Microsoft entschied sich für eine der radikalsten und umstrittensten Neugestaltungen der letzten Zeit mit Windows 8. Die Erstellung der Designsprache, die früher als Metro bekannt war (jetzt als Microsoft Design Language bekannt, aber mit dem früheren Begriff immer noch umgangssprachlich), wurde erstmals in gesehen weit verbreitete Verwendung mit Windows Phone (es gab auch Zune, aber je weniger darüber gesagt wurde, desto besser, aber da es das erste Design der Plattform war, war es nicht so schlecht. Es lag an der Version 2012 von Windows 8, die Kontroversen wirklich zu schüren.

Bei dieser Kontroverse ging es nicht so sehr um das Design selbst, sondern vielmehr darum, die mit Windows verbundenen Schlüsselkonzepte wie das Startmenü, das zu einem eigenständigen Skeuomorph geworden war, radikal zu ändern, sondern um alle Mitglieder der Webdesign-Community Für die Mainstream-Medien, die über die Gegenreaktion berichten, wurde das Design und damit Metro als Designsprache in Frage gestellt.

Da Microsoft seit langem ein Befürworter eines flachen, authentischen Designs ist, 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:

• Aufbau einer visuellen Hierarchie durch die Merkmale der Typografie, die als Grundlage für ein Layout und dessen Navigation ohne Verwendung überflüssiger grafischer Merkmale dient
• Diese Bewegung sowie die Fließfähigkeit und Leistung eines Designs sind für die Ästhetik eines Designs gleichermaßen wichtig
• Wenn Sie Inhalte und nicht Chrom in den Vordergrund stellen, können Sie sich stärker auf den eigentlichen Inhalt konzentrieren und Designs entsprechend skalieren
• "Authentisch digital" zu sein und ehrlich zu sein, dass der Verbrauch des Designs digital ist und das Design von Offline-Objekten offline bleibt

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

Google

Mit der Veröffentlichung von Android 4.0 Ice Cream Sandwich begann Google auch mit der Einrichtung seiner eigenen internen Designsprache Holo. 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 optisch an viele der gleichen Ideale wie die Windows-Familie und bietet leichte Typografie, monochrome Symbole außerhalb des Startbildschirms und ein gedämpftes, aber universelles Farbschema.

Apple

Während Google und Microsoft große Änderungen an ihren Designsprachen vornahmen, hielt Apple über mehrere Generationen seines Betriebssystems an seinen skeuomorphen Prinzipien fest. Dies änderte sich erst vor wenigen Monaten mit der Ankündigung von iOS 7 und einem völlig anderen Schritt bei der Gestaltung des Betriebssystems. Symbole sind flacher, Typografie ist leichter und die Metaphern sind aus.

Dies wird besonders bei iOS deutlich, wenn Sie die aktuelle Iteration beispielsweise der Taschenrechner-App mit der von iOS 7 vergleichen. Diese spezielle App hat sich von dem Versuch, einem physischen Gerät mit durch Gradientenhintergründe gekennzeichneten Schaltflächen zu ähneln, zu einem völlig flachen Design entwickelt, das von unnötigen Metaphern unabhängig ist.

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 Merkmale des flachen Designs wirklich zu definieren, aber wir können uns zumindest einige der allgemeinen Themen ansehen.

Minimalismus

Minimalismus ist aus verschiedenen Perspektiven ein Schlüsselprinzip im flachen Design. Die Content-Philosophie von Microsoft und nicht die Chrome-Philosophie sind dieser Tatsache sehr treu und legen nahe, dass überflüssiges "chrome" - die zusätzlichen Elemente der Benutzeroberfläche, die nicht den Kerninhalt der Seite darstellen - minimal sein und praktisch nicht vorhanden sein sollte, wenn dies nicht erforderlich ist. Die Verwendung von Typografie und der daraus festgelegten visuellen Hierarchie ist der Schlüssel für die erfolgreiche Ausführung dieser Art minimalistischer Benutzeroberfläche, auf die wir später noch eingehen werden.

Eine gesunde Nutzung des negativen Raums, der Ränder und der Polster trägt auch zum allgemeinen Gefühl eines flachen Designs bei, indem Elemente anstelle der Details, die sie einst unterschieden, voneinander entfernt werden.

Minimalismus gilt jedoch nicht nur für Designs in ihrer Gesamtheit. Der Schlüssel zum Erreichen eines flachen Designs liegt vielmehr darin, in einzelnen Elementen Ihres Designs Minimalismus auszuführen und auf überschüssige Effekte wie Schatten, Beleuchtung, unnötige Farbverläufe und dergleichen zu verzichten. Stattdessen gilt als Faustregel, dass alle Ihre Elemente, wie der Name schon sagt, flach aussehen sollten, ohne falsche Tiefe, die durch Abschrägung und andere Effekte erzeugt wird. Dies ist eine ganz andere Herangehensweise an das Web-Erlebnis, das wir gewohnt sind, in unnötige Verzierungen eingeschlossen zu sein.

Typografie

Typografie ist ein Schlüsselelement für flaches Design, und erfolgreiche typografische Entscheidungen können zu einer erfolgreichen Umsetzung der gesamten Designtheorie führen. Da, wie im letzten Abschnitt erläutert, ein großer Teil des flachen Designs darin besteht, zusätzliche Verzierungen und nicht benötigte Details zu entfernen, spielt die Typografie im Allgemeinen eine führende Rolle in Form der gesamten Seite.

Da Typografie eine grundlegende Rolle in der visuellen Hierarchie einer Seite spielt - oder zumindest mehr als bei herkömmlichen Designs - ist die Auswahl und Verwendung der richtigen Schriftart eine große Entscheidung. In vielen flachen Designs ist Sans-Serif in der Regel im Spiel, da Serifen selbst unnötige Verzierungen und eher ein Zeichen der Formalität als der Moderne sind. Von diesen serifenlosen Schriften suchen Sie nach Schriften mit Verfügbarkeit in verschiedenen Gewichten, sodass nur eine oder zwei Familien erforderlich sind, um die gesamte Hierarchie Ihres Designs zu füllen, um das minimalistische, einfache Gefühl aufrechtzuerhalten.

Eine Kombination aus effektiver Nutzung des negativen Leerzeichens und einer gut ausgewählten Schriftfamilie kann Ihren Text zu einer effektiven Grundlage für Ihr Design machen, und Benutzeroberflächen wie Windows 8 sind ein Beweis dafür. Erstellen Sie eine saubere, flache Typografie und Ihr Design wird folgen.

Farbe

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

In jeder Literatur zu diesem Theme, die in Beispielen für flaches Design weit verbreitet ist, gibt es einen starken Trend: Designer verwenden die Bewegung für flaches Design, um hellere Farben mit einer höheren Frequenz einzuführen, als nur ein oder zwei Farben in einer Handvoll Schattierungen zu verwenden.

Sie können weiterhin flaches Design mit Graustufen mit einer Akzentfarbe verkörpern. Wenn Sie jedoch neue Farbtrends übernehmen und eine helle, vielfältige Palette erstellen, können Sie wichtige Kontraste erzeugen und Effekte erzielen, die nur mit Farbverläufen, Schatten und anderen ausgehenden Verzierungen konkurrieren. Mehrere helle, kräftige Farben sind das Markenzeichen des flachen Designs.

Geräteunabhängig

Da das Web auf mehr Geräten als je zuvor genutzt wird, geht die Schaffung eines reaktionsschnellen, leichten und mobilen Designs mit einem flachen Design einher. Sie müssen kein ansprechendes Layout erstellen, um ein starkes Beispiel für flaches Design zu erstellen. Aspekte wie eine saubere, skalierbare Typografie und eine flache, vektorbasierte Ikonografie machen dies jedoch einfacher als je zuvor.

Wir haben uns eingehend mit reaktionsschnellem Design befasst, und es gibt viele andere Ressourcen im Internet, die bereit sind, Ihr Interesse an der geräteübergreifenden Skalierung zu berücksichtigen. Die Schaffung eines reaktionsschnellen Designs, das Minimalismus mit starker Typografie und einer geringeren Abhängigkeit von überflüssigen Texturen und Effekten verkörpert, ist etwas, wofür Ihre Benutzer Ihnen danken und Ihre Arbeit als maschinenunabhängig fördern werden.

Trends sind Trends

Flaches Design ist ein Trend, keine Voraussetzung für das Design für das Web. Während sich viele Hauptakteure im Bereich Webdesign und -technologie auf flache Designs konzentrieren, bedeutet dies nicht, dass jedes Projekt dies tun muss oder dass die Ästhetik für jedes Szenario richtig ist. Trends kommen und gehen; Es gibt eine Geschichte voller populärer Designethik, über die man nicht mehr nachdenken sollte (erinnern Sie sich, als Zelte der letzte Schrei waren?)

Trends sind flüchtig und wenn Sie ihnen wie einer Bibel folgen, werden Sie mit der Zeit zurückbleiben.

Angesichts der Tatsache, dass sich immer mehr große Namen für das flache Design entscheiden, scheint es ein logischer Schritt zu sein, sich auf den aktuellen Trend einzulassen. Es ist jedoch wichtig, das Potenzial Ihrer Designs nicht einzuschränken, da Sie versuchen, cool und auf dem neuesten Stand zu bleiben. Behandeln Sie stattdessen jedes Projekt anders und übernehmen Sie gegebenenfalls nur die Merkmale dieses bestimmten Trends, die Sie für richtig halten. Flaches Design mag beliebt sein, aber es ist kein Gesetz und sollte keine Grenze für die Herstellung von großartigem Design sein.

Wir könnten im nächsten Jahr radikal unterschiedliche Trends beobachten, aber wenn Sie sicherstellen, dass Sie geeignete Entscheidungen treffen und die diesjährige Richtung nicht als starre Vorlage verwenden, sollte Ihr Projekt für viele Jahre gut sein.

Abschluss

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

Es besteht kein Zweifel, dass die Geburt des flachen Designs größtenteils eine Reaktion auf Skeuomorphismus ist; Schauen Sie sich Apples Umstellung von iOS 6 auf iOS 7 an, um dies zu sehen. Flaches Design ist wie Skeuomorphsim, das alle erwachsen ist und weiß, dass die Mehrheit der Webbenutzer jetzt versteht, dass eine Taste zum Drücken dient, ohne dass eine Abschrägung erforderlich ist, um wie eine Taste zu erscheinen, die Sie im wirklichen Leben drücken könnten. Flaches Design ist ein eigenständiges Konzept, das überraschend komplex sein kann, aber bei guter Ausführung zu plattformübergreifenden schönen Designs führen kann.

Weiterführende Literatur

Weil Sie nicht genug über flaches Design gelesen haben.

• Die Flat Design Era von Layervault
• Flaches Design ist ideal 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 danke für all die hölzernen, mit Klebeband, 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-Modelle mit zusätzlichem 3D-Flair von Taras Kravtchouk
• Der Tod des flachen Designs durch den Dänen Ali Mughal
• Vergessen Sie flaches Design. Verbringen Sie Ihre Zeit damit, etwas Schönes von Harrison Weber zu machen