Designsysteme
Lernziele
Nachdem Sie diese Lektion abgeschlossen haben, sind Sie in der Lage, die folgenden Aufgaben auszuführen:
- Nennen der Merkmale und Funktionen eines guten Designsystems
- Beschreiben, wie Designer und Entwickler Designsysteme verwenden, zu ihnen beitragen und sie verwalten
- Erläutern, wie das Salesforce Lightning Design System (SLDS) Entwicklern die Erstellung von Lösungen in der Salesforce-Plattform erleichtert
- Beschreiben, wie und warum sich SLDS von den meisten Designsystemen unterscheidet
Was ist ein Designsystem?
Bevor wir uns näher mit dem Lightning Design System und seinen magischen Kräften befassen, sollten wir erst einmal den Begriff Designsystem definieren.
Definition von "Designsystem" |
Erläuterung |
|---|---|
|
Ein Designsystem ist eine Sammlung aus wiederholbaren Entwurfsmustern und wiederverwendbarem Code, den so genannten Komponenten. Zu den Komponenten zählen Schaltflächen, Menüs, Klänge, Animationen, optische Muster und mehr. In einigen Designsystemen sind die Komponenten eventuell voll funktionsfähig und basieren auf einer UI-Plattform. In anderen Systemen, SLDS eingeschlossen, sind sie plattformunabhängig. |
Sie können sich ein Designsystem als eine Reihe von Bausteinen vorstellen (vielleicht sogar als die Kunststoffbausteine, die Kinder wie Erwachsene gleichermaßen begeistern). |
Zu einem Designsystem gibt es klare, barrierefrei zugängliche Standards, Prinzipien und Dokumentation. |
Wie diese beliebten Bausteine, sind die Komponenten in einem Designsystem stark standardisiert und haben ein erkennbares Erscheinungsbild. |
Entwickler kombinieren die Komponenten des Designsystems auf verschiedene Arten, um Anwendungen in JavaScript zu erstellen. Designrichtlinien dienen als Anweisungen für den Zusammenbau von Komponenten zu Mustern für spezifische Anwendungsfälle. |
Die Komponenten als solche haben eigentlich keine Funktion, doch wenn Sie die Bausteine zusammensetzen, können Sie praktisch alles damit bauen. |
Ein gutes Designsystem ist:
-
skalierbar: Mit zunehmender Reife eines Designsystems werden weniger Zeit und Geld für die Erstellung grundlegender Elemente (Bausteine) aufgewendet. Entwickler verwenden diese Elemente produkt- und funktionsübergreifend wieder.
-
effizient: Designsysteme sparen Zeit und Energie, indem sie Designer und Entwickler die Freiheit geben, sich auf Benutzerfreundlichkeit und Bedeutung zu konzentrieren.
-
visuell konsistent: Die Muster eines Designsystems sind mit dem Zweck verknüpft. Seine ästhetischen Elemente ergeben sich aus den Benutzeranforderungen. Standardisierte Komponenten unterstreichen sowohl den visuellen Stil als auch das Branding, wodurch Produkte und Funktionen ein einheitliches Erscheinungsbild bekommen und eine konsistente Benutzererfahrung bieten.
-
freigegeben: Wiederverwendbare, dokumentierte und barrierefrei zugängliche Elemente fördern die Zusammenarbeit und erleichtern es, Projektteile zu delegieren oder auf der Arbeit anderer aufzubauen.
Loslegen mit der Erstellung
Genau wie mit Bausteinen, können Sie mit einem Designsystem sofort mit der Anwendungserstellung beginnen. Dank der Verwendung vorkonfigurierter Komponenten können Sie sich darauf konzentrieren, komplexe Probleme zu lösen und die bestmögliche Benutzererfahrung zu schaffen.
Ein weiterer Riesenvorteil von Designsystemen besteht darin, dass Sie damit Designaufgaben in großem Maßstab verwalten können. Die Bibliothek aus Komponenten, Regeln und Richtlinien, trägt dazu bei, dass die Ergebnisse der vielen Designer, Entwickler, Teams und Produkte konsistent bleiben. Ein Designsystem entwickelt sich parallel mit geänderten Anforderungen und ermöglicht es Designern und Entwicklern, Schnittstellen und Tools innerhalb einer komplexen Plattform schnell und einfach zu aktualisieren.
Die Beteiligten
Ein Designsystem ist nur so gut wie seine Beteiligten.
-
Verbrauchen sind die Designer, Entwickler und Beteiligten, die Elemente des Designsystems zum Erstellen von Anwendungen verwenden. Die Verbraucher kommen sowohl von innerhalb als auch von außerhalb des Unternehmens, welches das Designsystem entwickelt hat, wenn das Unternehmen, wie etwa Salesforce, ein Ökosystem mit Kunden hat, die Anwendungen auf Grundlage der Unternehmensplattform erstellen.
-
Beitragende erstellen die Elemente und Muster, aus denen das Designsystem besteht. Bei jeder Release kann jeder Beitragende neue Muster, Komponenten oder Richtlinien bzw. Änderungen an bestehenden Elementen oder Richtlinien vorschlagen.
-
Kuratoren sind die Wächter des Designsystems. Dieses Team aus Engineering-Mitarbeitern, Produktentwicklern und visuellen Designern pflegt das Designsystem, prüft seinen Code und schult die Community in seiner Nutzung. Kuratoren prüfen vorgeschlagene Änderungen und bauen sie ein, um das Designsystem weiterzuentwickeln.
Da Sie dies lesen, sind Sie wahrscheinlich ein SLDS-Verbraucher oder -Beitragender.
Das Lightning Design System bei Salesforce
Bei Salesforce setzen wir voll auf Designsysteme. Ein Grund für die Leistungsstärke der Salesforce-Plattform besteht darin, dass sie sich an die komplexen Anforderungen einer Vielzahl von Benutzern anpasst.
Außerdem wachsen wir unglaublich schnell und vergrößern sowohl unseren Produktumfang als auch unsere Mitarbeiterzahl. Durch dieses Wachstum erfüllen wir mehr Benutzeranforderungen. Dazu müssen wir unbedingt effizient und in großem Maßstab ein stimmiges Produkterlebnis gestalten.
SLDS unterstützt Salesforce-Teams dabei. Mit für spezifische Anwendungsfälle geltenden Mustern können Designer schneller iterieren und effizienter konsistente Lösungen erstellen. Komponentenentwicklern steht immer das aktuellste Framework zur Verfügung mit sauberem, barrierefrei zugänglichem Markup und pixelperfektem CSS, sodass sie schneller und fehlerfreier arbeiten können. Kunden und Partner erstellen Anpassungen auf der Salesforce-Plattform und nutzen dafür ein häufig aktualisiertes, sauberes und konsistentes System, das klare Erläuterungen und Designbeispiele enthält und ein Reverse Engineering der Software damit unnötig macht.
Die meisten Designsysteme bieten voll funktionsfähigen Code. Da SLDS jedoch so viele verschiedene Codebasen unterstützt (etwa Lightning-Webkomponenten und React), muss es unabhängig bleiben. (Wenn Sie mehr darüber erfahren möchten, wie sich SLDS von anderen Designsystemen unterscheidet, klicken Sie am Ende dieser Einheit in "Ressourcen" auf den entsprechenden Link.)
Als nächstes machen wir einen Abstecher in die Vergangenheit, ganz weit zurück bis zur Geburtsstunde von SLDS.