{"id":1235,"date":"2019-01-15T16:14:24","date_gmt":"2019-01-15T16:14:24","guid":{"rendered":"https:\/\/blog.tchop.io\/?p=1235"},"modified":"2024-08-19T05:31:19","modified_gmt":"2024-08-19T05:31:19","slug":"warum-wir-googles-material-design-fuer-unser-dashboard-verwenden","status":"publish","type":"post","link":"https:\/\/blog.tchop.io\/de\/warum-wir-googles-material-design-fuer-unser-dashboard-verwenden\/","title":{"rendered":"Warum wir Google\u00b4s Material Design f\u00fcr unser Dashboard verwenden"},"content":{"rendered":"\n<figure><iframe loading=\"lazy\" src=\"https:\/\/giphy.com\/embed\/G0vaYbZDJV0cM\" loading=\"lazy\" width=\"480\" height=\"480\" allowfullscreen=\"\"><\/iframe><\/figure>\n\n\n\n<p>In den letzten Jahren dreht sich bei Google alles um das\u00a0<a href=\"https:\/\/material.io\/\" target=\"_blank\" rel=\"noopener\">Material Design<\/a>, mit dessen Weiterentwicklung und Umsetzung viele Designer im Unternehmen besch\u00e4ftigt sein d\u00fcrften. Regelm\u00e4\u00dfig wird diese Design-Richtlinie erweitert und um neue Tools erg\u00e4nzt. Urspr\u00fcnglich wurde das Ganze einmal f\u00fcr Android Smartphones und Tablet PCs entwickelt (wir verwenden es nat\u00fcrlich auch in unserer nativen Android App). Doch mittlerweile ist es auch das aktuellste und m\u00e4chtigste UI-Framework im Web.<\/p>\n\n\n\n<p>Fast jeder kennt die bekannten Design-Guidelines aus dem Hause Google (bewusst oder unbewusst): Klare Linien, Animationen zur Illustration von Ver\u00e4nderungen, klare Farbschemata.<\/p>\n\n\n\n<p>Immer mehr Menschen sind mit dem Look des Marterial Designs vertraut, da eine wachsende Anzahl gro\u00dfer, bekannter Plattformen und Websites auf diesen Baukasten setzt. Au\u00dferdem profitieren wir sowohl technisch als auch konzeptionell von den zur Verf\u00fcgung stehenden Ressourcen, die bestens dokumentiert und durchdacht sind. Au\u00dferdem geben sie uns die M\u00f6glichkeit mehr Ressourcen in die funktionale Seite zu investieren und hiervon profitieren die Kunden und Nutzer eben nunmal am meisten.<\/p>\n\n\n\n<p>Technisch haben wir uns f\u00fcr das Open Source Framework &#8222;<a href=\"https:\/\/material-ui.com\/\" target=\"_blank\" rel=\"noopener\">Material UI<\/a>&#8220; entschieden, welches auf dem von uns geliebten und verwendeten React-Framework basiert. Dieses stellt aus unserer Sicht die vielleicht fortgeschrittenste und popul\u00e4rste Umsetzung eines Material Design UI Kits dar.<\/p>\n\n\n\n<p>Abgesehen von dem Einsatz von Google\u00b4s Material Designs haben wir mit dem letzten Deployment noch ein paar weitere Verbesserungen implementiert. Die umfassende \u00dcberarbeitung unsere Dashboards bringt konkret folgende Vorteile f\u00fcr unsere Nutzer:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Bessere Lesbarkeit<\/h3>\n\n\n\n<p>Wir haben unsere Hausschrift &#8222;Basier Circle&#8220;, die wir schon auf der neuen Website verwenden, nun auch in unserem Dashboard integriert. Dies verbessert die Lesbarkeit auf allen Ger\u00e4ten, auch in den unterschiedlichsten Screen-Gr\u00f6\u00dfen. Die Schrift sieht in allen relevanten Browsern klasse aus.<\/p>\n\n\n\n<p>Wir sind gro\u00dfe Fans dieses kleinen spanischen Design-Studios, das diese Schrift entwickelt hat: http:\/\/atipofoundry.com\/fonts\/basier<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. Einheitliche Formen und Formularen<\/h3>\n\n\n\n<p>Material Design bietet einen breiten und toll gestalteten Baukasten an unterschiedlichen Formen, Formularen und UI-Elementen, die aus unserer Sicht kaum W\u00fcnsche \u00fcbrig lassen. Durch die Verwendung dieses Baukasten stellen wir sicher, dass bspw. das Formular f\u00fcr die Eingabe von Texten bzw. Inhalten \u00fcberall gleich aussieht und sich auch \u00fcberall gleich verh\u00e4lt. <\/p>\n\n\n\n<p>Effiziente, saubere Funktion steht beim Material Design im Vordergrund und ist bis ins letzte Detail sehr hochwertig ausgearbeitet. Ziel ist es, eine positive, benutzerfreundliche <a href=\"https:\/\/blog.tchop.io\/de\/wie-baut-man-eine-loyale-digitale-community-auf\/\">Interaktion<\/a> zwischen User und Website (oder auch App) zu schaffen. Klare Formen helfen dem User, sich zu orientieren und verringern so die notwendigen Navigationswege.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3. Eine homogene Farbpalette<\/h3>\n\n\n\n<p>Aber nicht nur die Auswahl von Elementen ist eine wichtige Grundlage f\u00fcr ein UI Framework, sondern nat\u00fcrlich auch die Auswahl der Farbpalette. Es darf nicht zu bunt sein, nicht zu eint\u00f6nig und gleichzeitig d\u00fcrfen sich Farben nat\u00fcrlich nicht bei\u00dfen oder in Kombination unlesbar werden.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"263\" src=\"https:\/\/blog.tchop.io\/wp-content\/uploads\/2019\/01\/material-design-rainbow.png\" loading=\"lazy\" alt=\"\" class=\"wp-image-1237\" srcset=\"https:\/\/blog.tchop.io\/wp-content\/uploads\/2019\/01\/material-design-rainbow.png 800w, https:\/\/blog.tchop.io\/wp-content\/uploads\/2019\/01\/material-design-rainbow-300x99.png 300w, https:\/\/blog.tchop.io\/wp-content\/uploads\/2019\/01\/material-design-rainbow-768x252.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p>Die von Google zur Verf\u00fcgung gestellte Farbpalette ist eine wunderbare Basis, die wir je nach Bedarf in Teilen anpassen bzw. adaptieren. Sie bietet neben einer einheitlichen Arbeitsgrundlage auch komplexe Funktionen und stellt Inhalte sauber dar. <\/p>\n\n\n\n<p>Wie gesagt: da immer mehr popul\u00e4re Plattformen das Framework benutzen, gew\u00f6hnen sich die Nutzer schnell daran. Material Design verspricht wie wir finden daher eine gleichbleibend gute Benutzererfahrung auf allen Endger\u00e4ten.<\/p>\n\n\n\n<p>Wir sind gespannt auf Ihr Feedback und freuen uns nat\u00fcrlich \u00fcber Anregungen und Anmerkungen aller Art. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>In den letzten Jahren dreht sich bei Google alles um das\u00a0Material Design, mit dessen Weiterentwicklung und Umsetzung viele Designer im Unternehmen besch\u00e4ftigt sein d\u00fcrften. Regelm\u00e4\u00dfig&#8230;<\/p>\n","protected":false},"author":3,"featured_media":1247,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[65],"tags":[],"coauthors":[134],"class_list":["post-1235","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-die-plattform"],"_links":{"self":[{"href":"https:\/\/blog.tchop.io\/de\/wp-json\/wp\/v2\/posts\/1235","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.tchop.io\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.tchop.io\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.tchop.io\/de\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.tchop.io\/de\/wp-json\/wp\/v2\/comments?post=1235"}],"version-history":[{"count":22,"href":"https:\/\/blog.tchop.io\/de\/wp-json\/wp\/v2\/posts\/1235\/revisions"}],"predecessor-version":[{"id":1271,"href":"https:\/\/blog.tchop.io\/de\/wp-json\/wp\/v2\/posts\/1235\/revisions\/1271"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.tchop.io\/de\/wp-json\/wp\/v2\/media\/1247"}],"wp:attachment":[{"href":"https:\/\/blog.tchop.io\/de\/wp-json\/wp\/v2\/media?parent=1235"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.tchop.io\/de\/wp-json\/wp\/v2\/categories?post=1235"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.tchop.io\/de\/wp-json\/wp\/v2\/tags?post=1235"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/blog.tchop.io\/de\/wp-json\/wp\/v2\/coauthors?post=1235"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}