Skip to content

Microsoft präsentiert neuen Illustrationsstil im Fluent-Design

Windows Fluent Design Illustration, Quelle: Microsoft
Windows Fluent Design Illustration, Quelle: Microsoft

Microsoft hat für Illustrationsgrafiken einen neuen Stil präsentiert. Gleichzeitig wurden die in Microsofts Designsprache „Fluent Design“ verankerten Gestaltungsprinzipien weiterentwickelt. Das Software-Unternehmen geht, bezogen auf die Evolution von Flat Design hin zu einer Gestaltung mit 3D-Anmutung, den nächsten Schritt.

Seit 2017 setzt Microsoft auf die Designsprache „Fluent Design“. Im Gegensatz zur früheren Designsprache „Metro“ (später „Modern UI“), welche sich durch eine flache Optik und minimalistische Ästhetik auszeichnet (Flat Design, Kachel-Optik) zeichnet sich „Fluent Design“ durch Stilmerkmale wie Farbverläufe, Dimensionalität und Materialität (Oberflächentexturen) aus.

Bereits Ende 2018 wurden die Icons der Office-Suite auf diese Stilmerkmale umgestellt (dt berichtete). Microsofts Webbrowser Edge bekam 2019 ein Logo mit Farbverläufen verpasst. Sukzessive werden seitdem Anwendungen und Produkte auf das neue, „fluffigere“ Design umgestellt.

In einem Beitrag auf microsoft.design haben die Microsoft-Mitarbeiter Jay Tan, Senior Design Communications Manager bei Microsoft, und Alexis Copeland, Principal Creative Director bei Microsoft, einen neuen Illustrationsstil sowie weiterentwickelte Gestaltungsprinzipien vorgestellt.

Die Integration neuer Stilmerkmale und die Weiterentwicklung der Designsprache solle sowohl in innerhalb der User-Journey als auch im Kontext Marketing für mehr Zusammenhalt und Harmonie sorgen und so eine nahtlosere End-to-End-User Journey fördern, wie das Unternehmen erklärt. Um dies zu erreichen, werden auch Illustrationen auf die für Microsoft universell geltenden Markenprinzipien – menschlich, lebendig, dimensional – ausgerichtet.

Studien hätten gezeigt, dass die bisherigen Illustrationen zwar oberflächlich als farbenfroh, integrativ und freundlich angesehen werden, in Summe jedoch vielfach als uninteressant und emotionslos aufgefasst wurden. „Der flache, vektorisierte Stil, der einst branchenweit sehr beliebt war, kommunizierte jetzt nicht mehr optimal und rief möglicherweise Ideen und Themen hervor, die nicht mit unseren Unternehmenswerten übereinstimmten“, wie Kommunikationmanager Tan und Kreativdirektorin Copeland schreiben.

Bisheriger Illustrationsstil

Windows Old Fluent Design Illustration, Quelle: Microsoft
Windows Old Fluent Design Illustration, Quelle: Microsoft

Um weiterhin relevant zu bleiben und angenehme Kundenerlebnisse zu schaffen, habe sich Microsoft entschlossen, die Erkenntnisse aus der Kundenbefragung auf den Bereich Illustrationen anzuwenden, sodass diese im Einklang mit der Markenkultur von Microsoft stehen. Alle zukünftigen in der Bibliothek von Microsoft enthaltenen Illustrationen werden demnach dahin gestaltet, Verspieltheit, Zusammenarbeit und Inklusion widerzuspiegeln. Hierbei gelten die folgenden fünf zentralen Leitprinzipien:

1. Humanity (Menschlichkeit)
2. Color and Gradients (Farbe und Farbverläufe)
3. Dimension
4. Sophistication (Raffinesse)
5. Playful (Verspieltheit)

Neuer Illustrationsstil

Windows Fluent Design Illustration, Quelle: Microsoft
Windows Fluent Design Illustration, Quelle: Microsoft
Windows Fluent Design Illustration, Quelle: Microsoft
Windows Fluent Design Illustration, Quelle: Microsoft
Windows Fluent Design Illustration, Quelle: Microsoft
Windows Fluent Design Illustration, Quelle: MicrosoftWindows Fluent Design Illustration, Quelle: MicrosoftWindows Fluent Design Illustration, Quelle: MicrosoftWindows Fluent Design Illustration, Quelle: Microsoft

Eine weiterer Entwicklungsschritt also, den Microsoft mit der Einführung des neuen Designs für Illustrationen/Grafiken vollzieht. Eine Entwicklung, die sich über viele Jahre erstreckt, wie auch die oben genannten Beispiele verdeutlichen. Die Anpassungen sind also keinesfalls, wie es teilweise im Netz heißt, „radikal“ – sie sind vielmehr graduell. Stufenweise werden bestehende Gestaltungsmerkmale ausgebaut, feinjustiert, und weitere Stilistiken hinzugefügt. Im Vergleich zum einstigen Metro-Design unterscheidet sich die Fluent-Designsprache freilich grundlegend.

Das einstige sachlich-funktionale, schlichte Marken- und UI-Design von Microsoft hat sich im Laufe der Jahre in Richtung Verspieltheit, Vielfarbigkeit, Transparenz, Tiefe und Detailreichtum gewandelt. Während die frühere Designsprache auf abstrakten, flachen, meist einfarbigen Formen beruhten, haben die im Fluent Design angelegten Grafiken und Formen einen starken Bezug zu realen Objekten und Gegenständen.

Viele Darstellungen, etwa eine Notizbuchgrafik, „imitieren“ das Aussehen realer Gegenstände. Derlei Illustrationen fungieren als Bildmetapher, die ein konkretes Objekt beschreiben. Ein Design, das sich bereits in früheren Betriebssystemen findet. Insbesondere in früheren MacOS-Umgebungen, wie dem Aqua User-Interface), kam dieses Designprinzip, das auch unter dem Begriff Skeuomorphismus bekannt ist, zum tragen. Aus dem Alltag vertraute Objekte und Zeichen (Semiotik) können auf diese Weise dabei helfen, so das damit verbundene Bedienkonzept, digitale Objekte und Funktionen zu verstehen.

Wie gefällt Dir der neue Stil?

Ergebnis anzeigen

Wird geladen ... Wird geladen ...

Mediengalerie

Dieser Beitrag hat 19 Kommentare

  1. Wow, da ist sie jetzt wohl – die Abkehr vom Minimalismus der letzten Jahr(zehnt)e. Ich bin zwiegespalten: Einerseits finde ich den Stil ansprechend, die postulierten Kriterien Menschlichkeit und Verspieltheit werden voll erfüllt. Alles ist jetzt irgendwie sehr knuffig.
    Andererseits bin ich völlig konsterniert. Das sieht alles aus wie aus einem Animationsfilm und ich komm nicht von dem Gedanken weg: “Euer Ernst?!” Das mag ja für den privaten Nutzer eventuell adaquät sein, aber Windows läuft doch auch auf Abermillionen von Büro-Computern. Will und kann man mit so einem Stil professionelle Kunden überzeugen? Spontan finde ich die Vorstellung komplett lächerlich.

    Und dann ist da noch die praktische Seite: Das ist doch alles viel zu kleinteilig, detailreich und kontrastarm. Das ist in groß erstmal schön anzusehen. In den Thumbnails der Mediengalerie unter dem Beitrag aber kann ich im zweiten Bild z.B., wo die Icons ungefähr so groß sind wie die Icons bei mir im Dock, so gut gar nichts erkennen. Weiß auf Weiß (bzw. Hellgrau auf Hellgrau) mit grauen Schatten, dazwischen unförmige Farbkleckse.

  2. Hui.. wird sehr komplex, ich hab ehrlicherweise starke Probleme, einige der Illustrationen zu “entziffern”.

    Es ist mir zu viel auf einmal gewollt: Grelle Farben auf weißem, überstrahltem Untergrund (das eine Beispiel im Dark-Mode wirkt schon viel besser), krasse Verläufe, (Halb-)Transparenzen, extreme Schlagschatten, 3D, schwebende Elemente, eingedrückt und gleichzeitig hervorgehoben innerhalb einer Illu. Wow, da hat sich jemand richtig ausgetobt.

    Mir scheint ein wenig, als hätte man einfach nur Keywords aus den Befragungen genommen (“bunter”, “lebendiger”, “eigenständiger”), umgesetzt, aber das Zusammenspiel selbiger, oder die Nutzbarkeit in der Realität, außer Acht gelassen. Ich kann mir ehrlich gesagt nicht vorstellen, dass der normale User davon nicht überfordert ist, wenn schon der Icon-Geübte Designer denkt es sei verwirrend.

    Was ich nicht ganz herauslesen konnte: Handelt es sich “nur” um begleitende Illustrationen, oder auch um App-Icons? Interessant wär auch, wie weit ist das barrierefrei? Für Sehgeschädigte, oder auch “nur” Menschen mit Farbsehstörung.

    1. Was ich nicht ganz herauslesen konnte: Handelt es sich “nur” um begleitende Illustrationen, oder auch um App-Icons? I

      Zunächst betrifft das Redesign den Bereich der Illustrationen. Microsoft hat im Zuge der Vorstellung auch, und deshalb kann ich die Frage nachvollziehen, App-Icon-ähnliche Grafiken veröffentlicht. Doch die eigentliche Iconography ist davon zunächst nicht betroffen. Wie gesagt handelt es sich um einen fließenden, fortwährenden nicht-abgeschlossenen Gestaltungs- und Entwicklungsprozess. Es ist nicht auszuschließen, dass zukünftig auch Icons von Apps und andere Logo-ähnlichen Zeichen die neuen Stilmerkmale übernehmen werden.

    2. Ja, sieht kagge aus. MS ist echt zu einer Lachnummer verkommen. Die Windows 11 GUI – nix homogen und noch massig Zeug von 7, 8 & 10 drin. Und diese neuen quietschi bunti klicki icons… was haben die genommen um sowas abzusegnen? Da lobe ich mir so manche Linux Distro.

  3. Boah ey, denke ich mir da, nicht schon wieder so eine Phase!

    Alle Welt spricht von Vereinfachung, Barrierefreiheit, einfache Sprache und zack wird es kompliziert und alles andere als eindeutig. Vielleicht habe ich etwas verpasst, aber das nun wieder auf 2D-Medien sich erneut 3D breit machen soll, komme ich nicht drauf klar.

    Auch die Farbigkeit ist so Candy-like, es wirkt schon fast wie ein schlechter Versuch, Apple abzukupfern und ich bin Windows Nutzer.

    Mag es am Alter liegen?
    Bin ich zu sehr in meiner Bubble unterwegs?

    Ich kann da aktuell leider oder zum Glück – wer weiß – noch gar nichts mit anfangen.

  4. Woah … im ersten Moment ziemlich überwältigend. 3D-animierte Icons aus Knete, Filz und Glas, die durch ein endloses Meer aus Creme dahergeschwommen kommen. Okay, das ist weird – und genau das gefällt mir daran!

    Windows traut sich hier, vom minimalistischen Einheitsbrei (sowohl die ewig gleich aussehenden People-Illustrationen á la Corporate Memphis als auch die fortschreitende Reduzierung der Komplexität bei Logos, siehe z. B. Zooplus) auszubrechen, und ich finde, das ist gut gelungen. Natürlich spricht so ein knuffiges, haptisches Design, das den vor ein paar Jahren noch so gehypten Neomorphism- und Glasmorphism-Trend durch Texturen und Effekte auf ein nächstes Level hebt, nur eine bestimmte Gruppe an, aber dieses »Problem« kommt nun mal mit jedem Stil.

    Aber um darauf zurückzukommen, dass es anfänglich sehr überwältigend aussieht: Wie oft ist es tatsächlich der Fall, dass man alle Icons in einem 5 × 3 Raster nebeneinander angeordnet sieht? Wahrscheinlich eher selten.

    Dass man einige der Icons keinem Service zuordnen kann, weil sie sehr speziell sind, ist allerdings schade. Hier wäre meine Frage: Wird später mit Unterschriften gearbeitet, oder muss man raten?

    Im Großen und Ganzen gefällt mir der Ansatz sehr. Klickt man sich halt durch, bis man beim entsprechenden Service gelandet ist.

  5. Ich finde das Design ähnlich zur Knetgummi-Serie “Shawn das Schaf” und deshalb vielleicht auf den ersten Blick unpassend für Microsoft. Aber vielleicht wird es umso besser, je länger man damit konfrontiert wird.

  6. Die Idee finde ich gut, und auch die Icons wirken einzeln betrachtet ansprechend.

    Allerdings bereitet mir die Übersicht aller Icons körperliches Unbehagen, sowas hatte ich noch nie. Ich kann es schwer in Worte fassen, es wirkt chaotisch und unübersichtlich.

  7. Das erste Wort, das mir einfällt, ist leider “infantil”. Ich bin natürlich gespannt, wie die Nutzer-Erfahrung am Ende sein wird, aber ernstgenommen fühle ich mich so nicht mehr.

  8. Minimalistische Flat-Designs waren ab iOS 7, also September 2013, DER Trend in der Designwelt. Das nun, 10 Jahre später das Pendel in die andere Richtung schwingt ist überfällig. Redesigns wie das von PayPal zeigen, wie unkreativ das Flat Design heute ist. Daher finde ich es einerseits mutig, andereseits überfällig, dass Microsoft nun offiziell das 3D Design zurück bringt.

    Die gezeigten beispiele wirken tasächlich ein wenig zu kindlich für meinen Geschmack, allerdings bin ich mir sicher, dass die fertigen Produkte sich da stärker zurückhalten.

  9. Hmm, das verlangt natürlich auch gewisse Auflösungen auf den Bildschirmen, sonst ensteht nur eine unruhige Pixelei.

    Ich bin nicht überzeugt davon. Microsoft macht (mal wieder) den Fehler, seinen Produkten eine Art Lifestyle zu verpassen, obwohl das meiste davon eigentlich Arbeitsgeräte sind. Windows 8 ist schon krachend gescheitert, weil – oh Wunder – die Arbeitswelt doch nicht einfach auf Tablet und Touchgesten umgeschwenkt ist. Für Spielereien ist diese Technik und Optik ja vielleicht nett, aber wer gleichzeitig mit zwei Exceltabellen und einem Word-Dokument und einem CAD- oder GIS-Programm beschäftigt ist und drei Monitore vor sich hat (Beispiel: Berichterstellung zu einer Bilanzierung von umweltrechtlichen Ausgleichsmaßnahmen bei verschiedenen Standorten und Modellen von Windenergieanlagen), und das acht Stunden täglich, der hat keine Zeit und Lust für Spielereien, Rumgewische und Kachel-Effekte.

    Und ähnlich sehe ich das auch hier. Dieses Fluffige ist hinderlich, stört den Arbeitsfluss, stört mit der verlangten hohen Icon-Auflösung die Monitoraufteilung und stemmt sich zu sehr in den Vordergrund.

    Windows 10 ist deshalb so gut, weil wir hier zum ersten Mal eine wirkliche Arbeitsoberfläche haben, die größtenteils auf die performance-fressenden, platznehmenden, ablenkenden optischen Spielereien wie glossy, bunt, Aero, hallo-ich-bin-ein-springendes-Icon-und-tanze-dir-was-vor-wenn-du-den-Cursor-auf-mich-führst etc verzichtet.
    Sehr schade, dass Microsoft sich wieder umorientiert.

    1. Finden Sie Win10 wirklich viel besser als 7 oder XP? Oder nur anders? Als ich jeweils upgegraded habe (Win 8 habe ich übersprungen) habe ich ehrlich gesagt wenig Unterschiede gemerkt. Klar gab es Verbesserungen (schnellere Suche, Datum in der Taskleiste…) aber die waren ja in erster Linie wegen des technischen Fortschritts bedingt und weniger durch die Designsprache

  10. Der Illustrationsstil oder die grundlegende UI Designsprache wird exakt 0,0 Auswirkungen auf die Kunden haben, weil Microsoft Software und noch spezieller die Webportale weiterhin unverständliche Monster bleiben. In Zukunft dann halt unverständliche Monster mit moderner UI.
    Wobei Microsoft ja nicht mal die bisherigen UI Systeme flächendeckend ausrollt.

    Wer jemals in SharePoint arbeiten (oder noch schlimmer: SharePoint administrieren) musste, weiß, was ich meine.

  11. Die alten Illustrationen waren inhaltlich gut erkennbar und wiesen eben noch nen gewissen Stil auf, der nicht allzu langweilig war. Bei den neuen Sachen sehe ich im Prinzip >80% Effekt und irgendwo ist da noch Inhalt, den man erst entziffern muss. Sieht halt aus als hätte man 20 weiße Keramikschalen mit buntem Wachs fotografiert. Und nicht 20 Icons gestaltet.

  12. Vom rein ästhetischen Standpunkt aus gesehen bin ich begeistert! Eine frische, einzigartige Interpretation, die mir sehr gefällt. Knete, Glas, Textur – herrlich anzusehen!

    Aber: Leider überzeugt mich die Lesbarkeit überhaupt nicht – und genau da müssen solche Grafiken glänzen. Aber vielleicht fällt das nach einer Eingewöhnungsphase nicht mehr so auf. Die Grafiker werden die Regeln ganz bewusst gebrochen haben!

    Ob das Design die Zeit überdauert, wird die Zeit zeigen. Vorerst aber Hut ab für den Mut und die wirklich kreative Gestaltung.

  13. Ein Problem ist meiner Meinung nach, wie sich auch in den Kommentaren widerspiegelt, dass Microsoft angekündigt hat explizit den Illustrationsstil zu ändern, gleichzeitig allerdings App-Symbole im neuen Stil zeigt. App-Symbole sind jedoch keine Illustrationen. Zeichen wie App-Symbole und andere Logos sind an ganz konkrete Identitäten bzw. Entitäten und/oder Funktionen gebunden. Sie repräsentieren. Deshalb unterscheiden sich derlei Zeichen sowohl inhaltlich, konzeptionell wie auch auf der semiotischen Ebene von Illustrationen. Demzufolge sollte auch ihr Aussehen entsprechend anders sein, möglichst einfach, verständlich, zugänglich.

    App-Symbole sollten/müssen leicht erkennbar und schnell erfassbar sein. Insbesondere in Sachen Skalierbarkeit werden an App-Symbole hohe Anforderungen gestellt. An Illustration sind jedoch ganz andere Funktionen geknüpft. So dienen sie etwa der visuellen Unterstützung / Untermalung von Textinformationen, im Sinne von Schmuckgrafiken.

    App-Symbole in der Stilistik von Illustrationen anzulegen, erscheint mir generell widersinnig. Denn schließlich sollen Anwender anhand einer Symbolik schnell erkennen können, welche Funktion bzw. Markenidentität mit dem jeweiligen Zeichen verknüpft ist. Doch App-Symbole im Microsoft’schen „Illustrationsstil“ sind alles andere als leicht verständlich, wie ja auch einige Leser hier angemerkt hatten.

    In der Vergangenheit habe ich das UI-Design von Microsoft vielfach gelobt. Microsoft war in dieser Hinsicht meines Erachtens lange Zeit „state of the art“, und Konkurrent Apple (Notizbuch im Ledereinband, Musik-Player mit Metalloberfläche, etc.) in Sachen funktionalem, modernen Interface-Design weit voraus. Sollte Microsoft den Illustrationsstil tatsächlich auch auf andere funktionelle Zeichen wie App-Symbolik und Icons übertragen, würde der Stil somit auch im Betriebssystem Einzug halten, wäre dies eine Zäsur.

  14. Die ganzen Erhebungen und Vertiefungen sind mir etwas zu übertrieben. Jedes Icon sieht auf den ersten Blick aus wie ein buntes Stück Seife auf weißer Keramik. Ob etwas nach außen oder Innen gewölbt ist, scheint mir mehr oder weniger zufällig zu sein. Insgesamt ist mein erster Eindruck, dass alles “verwaschen” wirkt.

Schreibe einen Kommentar

Die Netiquette ist zu beachten. Vor dem Hintergrund einer transparenten, sachlich-fairen Debatte wird die Nutzung eines Klarnamens empfohlen.

Folgende HTML-Elemente können verwendet werden: <b> <i> <img src="bildurl"> <a> <blockquote>

An den Anfang scrollen