Lesen Sie die Begründung einer Designsystemkomponente

Rote modulare Paneele und sich wiederholende Schatten auf einer Gebäudefassade

Über diese Auswahl

Vier öffentliche Referenzen zum Studieren von Komponenten als Entscheidungen über Inhalt, Verhalten und Zugriff statt einer Galerie attraktiver Steuerelemente.

Ein Schaltflächen-Screenshot sagt Ihnen wenig über die Validierung, die Tastaturnavigation oder darüber, was passiert, wenn eine Beschriftung länger wird. Eine gute Komponentendokumentation erläutert die umliegenden Entscheidungen. Diese Systeme und Artikel bieten unterschiedliche Erklärungsskalen, von Mustern öffentlicher Dienste über Produktgrundlagen bis hin zu detailliertem Schnittstellenverhalten. Studieren Sie ein Problem, bevor Sie sich eine visuelle Behandlung leihen.

Probieren Sie dies zuerst aus

Wählen Sie ein Muster, das Ihr Projekt tatsächlich benötigt, beispielsweise eine Fehlermeldung oder eine Offenlegung. Vergleichen Sie Zweck, Formulierung, Fokusverhalten und engstirnige Behandlung. Schreiben Sie eine kurze Akzeptanz-Checkliste und testen Sie dann Ihre eigene Implementierung mit einer Tastatur und realistischen Inhalten. Bewahren Sie die Quelldokumentation neben der von Ihnen getroffenen Entscheidung auf.

Denken Sie daran

Ein regierungs- oder produktspezifisches Muster trägt seinen ursprünglichen Kontext. Kopieren Sie den Wortlaut oder das Branding nicht blind. Ältere Artikel enthalten weiterhin nützliche Erklärungen, überprüfen jedoch die Implementierungsdetails anhand des aktuellen Browserverhaltens und der Hinweise zur Barrierefreiheit.

4 Links/In der vom Kurator gewählten Reihenfolge

Link 1Englisch

GOV.UK Designsystem

Studieren Sie Stile, Komponenten und Servicemuster sowie Nutzungshinweise. Lesen Sie, wann ein Muster geeignet ist, bevor Sie sein Beispiel kopieren.

design-system.service.gov.uk

Link 2Englisch

US-amerikanisches Webdesign-System

Vergleichen Sie Richtlinien für Komponenten des öffentlichen Sektors und Überlegungen zur Barrierefreiheit. Suchen Sie nach den Inhalts- und Interaktionsregeln hinter einem vertrauten Steuerelement.

designsystem.digital.gov

Link 3Englisch

Inklusive Komponenten

Lesen Sie ausführliche Erläuterungen zu Mustern wie Benachrichtigungen, Tabellen und Menüs. Nutzen Sie die Argumentation, um das Verhalten zu überprüfen und gleichzeitig älteren Code mit der aktuellen Praxis zu vergleichen.

inclusive-components.design

Link 4–

Adobe Spectrum

Entdecken Sie die Grundlagen und die plattformspezifische Dokumentation des Adobe-Designsystems. Vergleichen Sie gemeinsame Prinzipien mit den Anforderungen Ihres eigenen Produkts.