Für wen sind Design-Systeme gedacht?

Ich meine *spezifische* Design-Systeme. Design-Systeme als Konzept können praktisch jeder Website zugutekommen.

In letzter Zeit gibt es viel Hype um Design-Systeme. Erst neulich hat eine Organisation ihr Design-System öffentlich veröffentlicht und ich bekam eine Flut von DMs, E-Mails und Slack-Nachrichten, die mich ermutigten, es mir anzusehen. „Sieht gut aus“, sagte ich. Aber ich klopfe nur auf die Motorhaube eines neuen Autos, um es mal bildlich zu sagen. Ich habe noch nicht darin gesessen. Ich bin es noch nicht um den Block gefahren, geschweige denn cross-country oder habe versucht, Cheerios zwischen den Sitzen hervorzukratzen. Ich bin sicher, ich hätte mehr Meinungen, nachdem ich damit eine Seite oder 10 gebaut hätte (Entschuldigung für die gemischten Metaphern).

Das bringt mich zu ein paar Fragen. Kann ich mit diesem Design-System eine Website bauen? Sollte ich mit ihm eine Website bauen? Ist es für mich? Oder warte… für wen ist das überhaupt?

Sie haben alle Akkordeons.

Nun, nicht alle von ihnen, aber gedulden Sie sich, denn es gibt einen Punkt, den man machen kann.

Bootstrap hat auch ein Akkordeon! Entwickler verstehen Bootstrap total.

Was auch immer Sie davon halten, ich sehe wenig Verwirrung um Bootstrap. Sie verknüpfen das CSS, Sie verwenden das HTML, das sie Ihnen geben, und – 💥 – Sie haben Komponenten, die bereit sind, loszulegen.

Es ist möglich, dass Bootstrap eher eine „Pattern-Bibliothek“ als ein „Design-System“ ist. Ich weiß es nicht. Wahrscheinlich ist an dieser Unterscheidung etwas dran, aber die Namensgebung (falls es eine gibt) scheint austauschbar verwendet zu werden, sodass die Unterscheidung von Bootstrap als das eine oder andere keine Verwirrung beseitigt.

Entwickler greifen zu Bootstrap, weil…

• Es hilft ihnen, schneller zu bauen.
• Sie bekommen gute Qualität „out of the box“, wenn sie selbst nicht besonders gut in HTML und CSS sind.
• Sie wollen zugänglich sein und Bootstrap wurde durch den Zugänglichkeits-Test gejagt.
• [Fügen Sie Ihren Grund ein.]

Attraktiv, aber das scheinen für jedes Design-System eher Standard zu sein und nicht exklusiv für Bootstrap allein.

Hmmmm… Vielleicht schaue ich mich um und wähle für mein nächstes Projekt eine Non-Bootstrap-Lösung.

Viele Leute sitzen in diesem Boot.

Vielleicht ist das nächste Projekt React, also wollen wir ein Design-System, das React zum erstklassigen Bürger macht. Vielleicht hatten wir Probleme, Bootstrap nach unseren Wünschen anzupassen. Vielleicht haben wir gerade das Standard-Look anderer Design-Systeme gesehen und dachten, das wäre eine bessere Wahl. Vielleicht sind wir einfach gelangweilt von Bootstrap. Viele Gründe, außerhalb von Bootstrap zu suchen, genauso wie es viele Gründe gibt, es zu nutzen.

Da andere Design-Systeme auch Akkordeons haben, kann ich nicht einfach… eins auswählen?

So la-la?

Eine unmittelbare Überlegung ist die Lizenz. Salesforce's Lightning Design System wird oft als führend in der Welt der Design-Systeme angeführt und hat viele der aktuellen Gedanken dazu beeinflusst. Doch es ist nicht Open-Source-lizenziert. Tatsächlich ist es Open-Source-lizenziert. Es verwendet BSD Clause-3 (MIT-ähnlich) für alles außer den Schriftarten und Icons, die Creative Commons Attribution-NoDerivatives 4.0 sind. Mir wurde gesagt: „Jeder könnte den Code in seinem Projekt wiederverwenden, der nichts mit Salesforce zu tun hat. Sie können ihn nur nicht so wiederverwenden, dass er das System zu eng nachahmt.“

Das ist kein Problem – es ist wahrscheinlich eine gute Sache für Lightning. Es ist kein Allzweck-Mitnahme-Ding für alle Webentwickler der Welt als Zielgruppe. Es ist für Salesforce und die vielen Teams auf verschiedenen Entwicklungsstacks, die Dinge für Salesforce bauen. Wenn Sie nichts für Salesforce bauen, ist es nichts für Sie.

Warum ist es dann öffentlich und nicht nur ein internes Dokument für das Salesforce-Team? Das kann ich nicht für sie beantworten, aber soweit ich weiß, ist Salesforce so riesig, dass sowohl interne als auch externe Teams es nutzen. Daher ist die Veröffentlichung von Lightning vielleicht der nützlichste Weg, es allen zur Verfügung zu stellen, die es brauchen.

Das ist etwas, das wir im SLDS-Team aktiv diskutieren. Was genau bedeutet „Open Source“ für Design-Systeme, wenn die Nutzung so spezifisch ist? Ist es eher „Source Available“?

— Alexis Córdova (@acordova) 9. April 2019

Es gibt auch den netten Nebeneffekt, dass sie damit gute Presse bekommen, und das kann bei der Einstellung nicht schaden. Ich habe auch gehört, dass ein öffentliches Design-System interessante und nützliche Gespräche anregen kann.

Carbon Design System hingegen ist Open-Source-lizenziert. Sie haben auch einen ganzen Abschnitt, der erklärt, für wen Carbon bestimmt ist

Carbon ist die offizielle Implementierung der IBM Design Language für Produkt- und Webdesigner und repräsentiert ein ständig wachsendes Ökosystem von Design-Assets und Anleitungen. Mit einem umfassenden Satz von Human Interface Guidelines, Design Kits und Dokumentationen hilft Carbon Designern, schneller und intelligenter zu arbeiten.

Das sagt mir noch nicht ganz, was ich wissen will. Es sieht aus wie Standard-IBM-Zeug, also ist es definitiv für IBM.

Es ist Open Source, also kann ich es benutzen, wenn ich will. Aber ist es wirklich für mich und meine zufälligen Projekte? Wollen sie, dass ich es dafür benutze? Bin ich, der zufällige Entwickler, derjenige, an den sie bei diesem Projekt denken? Oder ist es IBM-zuerst, zufälliger Entwickler zweitens?

Unternehmen zuerst, die Welt danach.

Wenn ein Design-System von einem Unternehmen gemacht wird, dann ist es für das Unternehmen. Es kann auch Open Source sein, aber kein beliebiger zufälliger Entwickler, der es nutzen möchte, ist die Zielgruppe.

Es muss nicht einmal technisch ein Unternehmen sein, das es herstellt. Es könnte eine Regierung sein!

Ein wirklich großartiges Design-System ist das U.S. Web Design System, das gerade 2.0 wurde. Es ist wunderschön! Es sieht sehr komplett aus und hat einige großartige Funktionen. Es hat eine edle, benutzerdefinierte Schriftart, wurde für die inkrementelle Einführung konzipiert, bietet sowohl nützliche Komponenten als auch Hilfsprogramme und wurde atomar aus Design Tokens aufgebaut. Vielleicht die beste Funktion ist, dass es extrem zugänglich ist, weil es gesetzlich vorgeschrieben ist.

Das U.S. Web Design System ist weitgehend Public Domain, also können Sie es durchaus nutzen. Aber es ist nicht für Sie konzipiert, sondern soll Menschen helfen, die Websites für die Regierung erstellen.

(Übrigens ist das U.S. Web Design System offen für Beiträge, was ziemlich cool ist, weil es eine Möglichkeit ist, einen bedeutenden Einfluss auf Websites zu nehmen, die für das Leben der Menschen sehr wichtig sind.)

Meine Denkweise ist, dass Open-Source-Design-Systeme nicht dazu gedacht sind, wiederverwendet und für sich selbst genutzt zu werden, sondern um daraus zu lernen und sie auf die eigene Anwendung anzuwenden

— Mike Dick (@miked1ck) 9. April 2019

Hier ist ein weiterer Knaller: Es gibt bewusst ein Spektrum an Anpassbarkeit bei Design-Systemen.

Selbst wenn Sie ein öffentliches Design-System, das Ihnen gefällt, technisch nutzen können, sollten Sie den Blickwinkel der Anpassbarkeit in Betracht ziehen. Es gibt ein ganzes Spektrum, aber betrachten wir die extremen Enden und die Mitte

• Keine Anpassbarkeit: Wir haben das erstellt, um die Konsistenz für uns stark durchzusetzen.
• Vorausgewählte Variationen: Wir haben Akkordeons in drei verschiedenen Farben.
• BYO Theme: Wir geben Ihnen ein Skelett, das das Muster grob erreicht, und Sie wenden die Stile nach Belieben an.

Es gibt Design-Systeme an allen Punkten dieses Spektrums. Bootstrap liegt vielleicht zwischen den beiden letzteren, wo Sie ein vollständig gestyltes Thema erhalten, aber die Anpassbarkeit größtenteils über das Setzen von Sass-Variablen erfolgt und unendliche Variationen schafft.

Polaris, das Design-System von Shopify, ist Open Source, aber definitiv für Shopify-Dinge. Sie versuchen absichtlich nicht das zu tun, was Bootstrap tut (sagen sie mir). Es geht viel mehr darum, die Konsistenz zu erzwingen und eine kohärente Marke einzuhalten, als Seiten zusammenzuschustern und anzupassen.

Material Design ist definitiv Googles Ding. Die Geschichte von Material Design ist, dass Google eine absolut riesige Menge an Produkten auf allen möglichen Plattformen hat. Dies könnte so leicht zu einem Durcheinander von inkonsistentem Design und Branding werden. Stattdessen entwickelt Google Material Design und liefert es erfolgreich über ihr scheinbar riesiges Imperium aus. Eine unglaubliche Erfolgsgeschichte in Design-Systemen. Ich denke also, es ist nicht verkehrt zu sagen, dass Material Design von Google für Google ist.

Aber heutzutage ermutigen sie definitiv andere Entwickler, es auch zu nutzen. Standardmäßig lässt das Ihr Ding wie ein Google-Ding aussehen.

Aber sie versuchen aktiv, Material Design anpassbarer zu machen, damit Sie Ihre eigene Marke einbringen können. Bisher sieht es so aus, als gäbe es ein Sketch-Plugin, das dabei hilft. Für uns Codierer sieht ihr Material Components Repository so aus, als wäre es mit Sass erstellt worden und viele Dinge sind mit Variablen eingerichtet, die Sie überschreiben können. Siehe dieses Tutorial zum Anpassen.

Es gibt viele Erfolgsgeschichten bei der Anpassung von Material Design. Unternehmen wie Lyft, Zappos und NPR, die alle starke eigene Markenidentitäten haben, nutzen alle angepasstes Material Design.

Das macht die Botschaft für Material Design umso kniffliger und interessanter. Es ist definitiv für Google, aber es ist auch sehr eindeutig für alle anderen gedacht, die es nutzen wollen. Diese Botschaft könnte funktionieren, da Google die Ressourcen und die Wahrnehmung hat, dies auf eine Weise zu tun, bei der ich denken würde, dass es für andere unternehmensspezifische Design-Systeme schwieriger ist.

---

Falls das nicht offensichtlich ist (und ich befürchte sehr, dass es das nicht ist), sind Design-Systeme keine Massenware. Wir können nicht einfach dasjenige auswählen, das das schönste Akkordeon hat, und es für das nächste Projekt verwenden. Wir dürfen es vielleicht nicht einmal benutzen. Es ist möglicherweise absichtlich für ein bestimmtes Unternehmen gebrandet. Hier gibt es alle möglichen Faktoren zu berücksichtigen.

Mein abschließender Rat richtet sich tatsächlich an die Macher von öffentlichen Design-Systemen: Klären Sie deutlich, für wen dieses Design-System gedacht ist und was sie damit tun können.

Ich möchte auch anmerken, dass jeder, den ich in den letzten Wochen auf dieses Thema angesprochen habe, unterschiedliche Meinungen zu all diesen Zielgruppen-Botschaften in Design-Systemen hatte. Natürlich würde ich mich freuen, Ihre Kommentare zu lesen, wie Sie darüber denken.