{"id":9683,"date":"2019-04-30T13:45:39","date_gmt":"2019-04-30T11:45:39","guid":{"rendered":"https:\/\/www.centigrade.de\/blog\/?p=9683"},"modified":"2019-09-20T15:05:17","modified_gmt":"2019-09-20T13:05:17","slug":"ebnet-microsofts-fluent-design-system-den-weg-zu-einer-besseren-zukunft-fuer-designer","status":"publish","type":"blog","link":"https:\/\/www.centigrade.de\/de\/blog\/ebnet-microsofts-fluent-design-system-den-weg-zu-einer-besseren-zukunft-fuer-designer\/","title":{"rendered":"Ebnet Microsofts Fluent Design System den Weg zu einer besseren Zukunft f\u00fcr Designer?"},"content":{"rendered":"<p>Wenn wir ehrlich sind, warten wir alle verzweifelt auf die Zukunft, auf den n\u00e4chsten Boom, der so nah scheint, aber in den letzten 5 Jahren eigentlich nicht viel n\u00e4hergekommen ist. <a href=\"https:\/\/www.microsoft.com\/design\/fluent\/\" target=\"_blank\" rel=\"noopener\">Microsofts Fluent Design<\/a> ist einer dieser Trends, der einen weiteren Schritt zu diesem Boom verspricht. Wird es den hohen Erwartungen der UI Designer Gemeinschaft gerecht werden k\u00f6nnen? Was k\u00f6nnen Designer, was k\u00f6nnen Entwickler im Moment daraus machen? Ich habe mir das Fluent Design System angesehen und es w\u00e4hrend meiner Arbeit an einem ersten Testprojekt untersucht. In diesem Artikel werde ich Ihnen mitteilen, was ich bisher gelernt habe.<\/p>\n<p><div class=\"MediaEmbedContainer\"><iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube-nocookie.com\/embed\/vcBGj4R7Fo0\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen=\"allowfullscreen\" data-mce-fragment=\"1\"><\/iframe><\/div><br \/>\n<!--more--><\/p>\n<h2>Ein entt\u00e4uschender Start f\u00fcr Designer<\/h2>\n<p>F\u00fcr mich war der Trailer von Microsofts Fluent Design riesig. Ein kurzes Video mit Einblicken in die gesamte Microsoft-Welt und wie sie durch diesen neuen Designansatz zusammenkommt, unterst\u00fctzt von einer sehr kraftvollen Musik. \u00dcbrigens, haben Sie gesehen, wie in einem Trailer eine E-Mail in ein Formular eingegeben wurde und das System mit &#8222;falsch formatierter E-Mail-Adresse&#8220; reagierte? Jemand bei Microsoft hat einen dunklen Sinn f\u00fcr Humor.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-9664\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/invalidemail_microsoft-e1556288232464.jpg\" alt=\"Microsoft Fehler falsch formatierte E-Mail\" width=\"960\" height=\"371\" srcset=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/invalidemail_microsoft-e1556288232464.jpg 960w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/invalidemail_microsoft-e1556288232464-300x116.jpg 300w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/invalidemail_microsoft-e1556288232464-768x297.jpg 768w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/invalidemail_microsoft-e1556288232464-640x247.jpg 640w\" sizes=\"auto, (max-width: 960px) 100vw, 960px\" \/><\/p>\n<p>Das Redesign einer unserer internen Apps war meine erste Ann\u00e4herung an ein praktisches Projekt von Fluent Design. Als ersten Anlauf nahm ich mir tats\u00e4chlich vor, den Style Guide komplett durchlesen. Ich habe es bis zur H\u00e4lfte geschafft, bevor ich aufgegeben habe. Die offizielle Dokumentation richtet sich meiner Meinung nach eher an Entwickler als an Designer, was f\u00fcr die Umsetzung gro\u00dfartig ist. Allerdings sind visuelle Beispiele selten &#8211; der Hauptanteil der Designsegmente wird durch Code und dessen Umsetzung repr\u00e4sentiert. Auf diese Weise k\u00f6nnen Entwickler leicht auf die Kernfunktionen von Fluent Design zugreifen. F\u00fcr die Designer stehen leider nur ein unvollst\u00e4ndiges Toolkit f\u00fcr einige Prototyping-Softwares zum Download zur Verf\u00fcgung. Weder der Style Guide noch der Kit beschreiben wirklich irgendwelche Aspekte des Designs im Detail, so dass es notwendig ist, weitere Medium-Artikel und Fluent Design Prototypen zu durchforsten, um das Gesamtbild zu erhalten. Da sich das Toolkit selbst in st\u00e4ndiger Entwicklung befindet, wird es wahrscheinlich bald die offizielle Dokumentation einholen. Aber im Moment war die Anfangserfahrung f\u00fcr mich als Designer, gelinde gesagt, mittelm\u00e4\u00dfig.<\/p>\n<p>Aber zur\u00fcck zu meinen Pl\u00e4nen, eine App zu bauen. W\u00e4hrend der Arbeit an diesem Projekt habe ich ein paar Dinge bemerkt: Das Layout-Redesign fokussiert mehr auf eine reibungslose Userinteraktion als das damalige Metro-Design-System. Die horizontale Navigation mit dem neu gestalteten Ribbon, einst &#8222;die umstrittene Registerkarten-Implementierung, die 2007 ihr Deb\u00fct gab&#8220; (neowin.net) und sich nun zu einem herrlich vereinfachten Navigationsbereich entwickelte, war eine der ersten \u00c4nderungen an einem geradlinigem Benutzererlebnis in der Microsoft Office Software.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-9666\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Microsoft-Ribbon-e1556288359501.jpg\" alt=\"Microsoft Ribbon Fluent Design\" width=\"646\" height=\"204\" srcset=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Microsoft-Ribbon-e1556288359501.jpg 646w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Microsoft-Ribbon-e1556288359501-300x95.jpg 300w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Microsoft-Ribbon-e1556288359501-640x202.jpg 640w\" sizes=\"auto, (max-width: 646px) 100vw, 646px\" \/><\/p>\n<div id=\"attachment_9668\" style=\"width: 626px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-9668\" class=\"wp-image-9668 size-full\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Fluent-Design-in-Microsoft-Office-1528875470-0-0.jpg\" alt=\"Microsoft Ribbon Fluent Design Metro\" width=\"616\" height=\"330\" srcset=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Fluent-Design-in-Microsoft-Office-1528875470-0-0.jpg 616w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Fluent-Design-in-Microsoft-Office-1528875470-0-0-300x161.jpg 300w\" sizes=\"auto, (max-width: 616px) 100vw, 616px\" \/><p id=\"caption-attachment-9668\" class=\"wp-caption-text\">Ribbon in MetroDesign vs ribbon in Fluent Design (Courtesy to howtogeek.com and winfuture.de)<\/p><\/div>\n<p>Auff\u00e4lliger ist jedoch die Verspieltheit von Licht und Tiefe in den neuen Fluent \u00a0Design Beispielen, die tats\u00e4chlich als nat\u00fcrlich und nicht wie billige Effekthascherei her\u00fcber kommen.<\/p>\n<p>Bei der Arbeit mit dem Designstil f\u00e4rbte diese Nachdenklichkeit \u00fcber die Darstellung der Physik auf mich ab. Eine der Kernfunktionen der App, an der ich arbeitete, war die Konvertierung von SVGs in XAML. F\u00fcr die in das Design eingebauten Aspekte \u00fcberlegte ich, ob sein Verhalten so nat\u00fcrlich wie m\u00f6glich wirkt. Ich gebe zu, dass es manchmal nicht so reibungslos geklappt hat, wie es hier klingt. F\u00fcr den Hintergrund habe ich ausschlie\u00dflich Acryl verwendet, um der Software eine Leichtigkeit zu verleihen.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-9672\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Fluent-Design-Example.jpg\" alt=\"Fluent Design Beispiel\" width=\"944\" height=\"664\" srcset=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Fluent-Design-Example.jpg 944w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Fluent-Design-Example-300x211.jpg 300w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Fluent-Design-Example-768x540.jpg 768w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Fluent-Design-Example-640x450.jpg 640w\" sizes=\"auto, (max-width: 944px) 100vw, 944px\" \/><\/p>\n<p>Auch die Navigation wird durch das extrem strukturierte vertikale Layout so minimal und organisiert wie m\u00f6glich gehalten. Ich habe das Reveal-Highlight im Prototyp gef\u00e4lscht, da es eine wichtige Rolle bei der Handhabung des Cursors spielt. Ich w\u00fcnschte, ich h\u00e4tte diese Funktion von Fluent Design sowie die native Animation besser in dem Prototyp integrieren k\u00f6nnen. Hier zeigt sich auch, dass die Dokumentation st\u00e4rker auf die Bed\u00fcrfnisse der Entwickler zugeschnitten ist. F\u00fcr die Designer ist es noch nicht m\u00f6glich, ohne viel Aufwand diese Aspekte in der Prototyping-Software nachzubilden. Ich glaube, wenn Adobe XD und Konsorten mal soweit sind, k\u00f6nnten wir den Designstil auf eine ganz neue Ebene bringen.<\/p>\n<p>Kurz gesagt, die Stileigenschaften wie Acryl, die nativen Animationen und der Einsatz von Licht bilden die Br\u00fccke zwischen Skeumorphic Design und Flat Design. Auf diese Weise verbindet es die Benutzung von interaktiven Oberfl\u00e4chen mit einer futuristischen und gleichzeitig vertrauten Sensation. Der Vormarsch des Acryls verwandelt die ebene Oberfl\u00e4che des Bildschirms in ein dreidimensionales Universum, mit Tiefe und einem Gef\u00fchl der Physik, w\u00e4hrend die Ann\u00e4herung des Lichts andererseits der menschlichen Ber\u00fchrung Superkraft zu verleihen scheint. Warum funktioniert es so gut? Ich lese gerade &#8222;Microinteraction&#8220; von Dan Saffer, und ich habe das Gef\u00fchl, dass es auch jemand vom Microsoft Design Team getan hat. Wie Saffer in seinem Buch lehrt, nutzt Fluent Design die bereits vorhandene Schnittstelle, um mit der Verbindung von Licht und Cursor eine neue Dimension zu schaffen. Durch die Betrachtung solcher Details belebt Fluent Design die \u00fcbersehenen Dinge, wie zum Beispiel die Hervorhebung des Cursors. Meiner Meinung nach wirken diese visuellen Effekte deshalb so nat\u00fcrlich und nicht wie ein Hollywood-Blockbuster \u00fcberlagert.<\/p>\n<p>Im Vergleich zu der Vielzahl an M\u00f6glichkeiten nutzt Microsoft selbst Fluent Design auf vorsichtige, ja sogar sch\u00fcchterne Weise. Die Office 365-Software wurde leicht \u00fcberarbeitet, und die Benutzerfreundlichkeit wurde verbessert, ja. Aber alles in allem sehen das Acryl und das vertikale Layout sehr \u00e4hnlich wie eine etwas andere Version von macOS aus, und einige Leute, die nicht genau aufpassen, haben die \u00c4nderung wahrscheinlich nicht einmal bewusst wahrgenommen.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-9676\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Acrylic-Backgrounds-Apple.jpg\" alt=\"Acrylic Hintergrund Apple\" width=\"900\" height=\"146\" srcset=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Acrylic-Backgrounds-Apple.jpg 760w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Acrylic-Backgrounds-Apple-300x49.jpg 300w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Acrylic-Backgrounds-Apple-640x104.jpg 640w\" sizes=\"auto, (max-width: 900px) 100vw, 900px\" \/><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-9674\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/vertical-layout-apple.jpg\" alt=\"Vertical layout Apple\" width=\"1180\" height=\"620\" srcset=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/vertical-layout-apple.jpg 1180w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/vertical-layout-apple-300x158.jpg 300w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/vertical-layout-apple-768x404.jpg 768w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/vertical-layout-apple-640x336.jpg 640w\" sizes=\"auto, (max-width: 1180px) 100vw, 1180px\" \/><\/p>\n<p>Acrylic Backgrounds and the vertical layout can also be found in macOS.<\/p>\n<p>Das Potenzial besteht darin, eine Benutzeroberfl\u00e4che mit den Eigenschaften zu verbessern und noch weiter zu gehen, die Software auf einem Laptop so spannend zu machen wie auf einem VR-Headset. Meiner Meinung nach liegt es nun an uns, die Idee aufzunehmen und eine eigene Interpretation des Designstils zu starten. Machen wir es riesig, indem wir die Interpretation von Licht, von Verhaltensanpassungen und schlie\u00dflich die im Designstil implementierte Kernidee aufgreifen.<\/p>\n<h2>Unterst\u00fctzung der Barrierefreiheit<\/h2>\n<p>Der beste Aspekt an Fluent Design ist jedoch auf den ersten Blick nicht sichtbar. Microsoft erinnert die Entwickler und Designer noch einmal daran, dass Inklusion wichtig ist. In gewisser Weise ist es traurig, dass wir immer dazu immer noch aufgefordert werden m\u00fcssen und es nicht einfach schon Bestandteil der Arbeitsweise ist, aber was soll man machen. Microsoft hilft uns nicht nur, indem sie uns End-to-End-Support von Bildungsarbeit bis hin zu Tests anbieten, sie wollen auch das Verst\u00e4ndnis von Inklusion \u00e4ndern. So sind ihre 4 Prinzipien der Barrierefreiheit weit entfernt von der Unterst\u00fctzung von Screenreading oder gro\u00dfen Schriftgr\u00f6\u00dfen. &#8222;Think universal&#8220;, &#8222;Make it personal&#8220;, &#8222;Keep it simple&#8220; und mein absoluter Favorit &#8222;Create delight&#8220;. Zwei dieser Prinzipien finden sich in vielen Produkten von selbst wieder. &#8222;Keep it simple&#8220;, eine von vielen Varianten von &#8222;Keep it simple stupid&#8220;, wurde in das Gehirn jedes Designers und Managers eingepr\u00e4gt und ist auch einer der Kernaspekte von Fluent Design. &#8222;Make it personal&#8220; war der Grund, warum wir f\u00fcr fast jede App ein Konto einrichten und uns alle Passw\u00f6rter merken m\u00fcssen. Das ist jedoch auch der Grund, warum sich unsere Apps an unsere Vorlieben in Bezug auf Helligkeit, Farben, Schriftgr\u00f6\u00dfen und Lieblingsinhalte erinnern, um uns das beste Erlebnis zu bieten. Dar\u00fcber hinaus verwendet Microsoft die Programme &#8222;Think universal&#8220; und &#8222;Create delight&#8220;. Die Kombination aller vier Prinzipien bildet die Grundlage f\u00fcr eine integrative und zug\u00e4ngliche Erfahrung. &#8220; Create delight: Delightful experiences evoke wonder and discovery. Sometimes it\u2019s magical. Sometimes it\u2019s a detail that\u2019s just right. We design these moments to feel like a welcomed change in tempo. The result is an experience that has momentum and flow.&#8220; Es ist schwierig, die Prinzipien zu kombinieren, und ohne Zweifel braucht es Zeit, um sie in die t\u00e4glichen Prozesse des Designs aufzunehmen. Da die App ein Prototyp ist, habe ich versucht, kontrastreiche Farben innerhalb der App zu verwenden. F\u00fcr die weitere Umsetzung der Barrierefreiheit freue ich mich darauf, diese f\u00fcr das endg\u00fcltige Design und die Entwicklung des eigentlichen Produkts voranzutreiben.<\/p>\n<h2>Bottom line<\/h2>\n<p>Fluent Design hat einige sehr starke Vorstellungen, die das UI- und UX-Design einen Schritt weiterbringen k\u00f6nnten. Es streckt gerade jetzt noch die F\u00fchler aus und verpasst daher die Gelegenheit, die Wirkung zu entfalten, die es haben k\u00f6nnte, insbesondere indem es sich haupts\u00e4chlich an Entwickler richtet und Designer in der Luft h\u00e4ngen l\u00e4sst. Aber es gibt Inspiration und f\u00fcr uns Designer k\u00f6nnte es unsere Verantwortung sein, diese Inspiration auf die n\u00e4chste Stufe zu bringen. Aber es liegt definitiv in unserer Verantwortung, die Integration in unseren Designprozess endlich umzusetzen.<\/p>\n","protected":false},"author":60,"featured_media":9665,"template":"","tags":[577],"class_list":["post-9683","blog","type-blog","status-publish","has-post-thumbnail","hentry","tag-ux-de-1"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/blog\/9683","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/types\/blog"}],"author":[{"embeddable":true,"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/users\/60"}],"version-history":[{"count":0,"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/blog\/9683\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/media\/9665"}],"wp:attachment":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/media?parent=9683"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/tags?post=9683"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}