Design Systeme und Styleguides
Die umfassenden Design-Richtlinien für Websites, die Farben, Typografie, Abstände, Komponenten und Interaktionen (wie Hover-Effekte) festlegen, werden im Fachjargon hauptsächlich als Design System oder Styleguide bezeichnet.
Es gibt verschiedene Begriffe, die sich je nach Detailgrad und technischer Umsetzung nebeneinander etabliert haben:
Die gängigsten Begriffe[Bearbeiten]
- Design System: Dies ist der modernste und umfassendste Begriff. Ein Design System ist eine lebendige Sammlung von Design-Prinzipien, Code-Komponenten (z.B. Buttons, Formulare), Styleguides und Dokumentationen, die von Designern und Entwicklern genutzt wird, um Konsistenz sicherzustellen. [1, 2, 3, 4, 5]
- Styleguide (oder UI Styleguide): Dieser Begriff konzentriert sich stärker auf die visuellen Regeln: Farben (Farbpalette), Schriftarten (Typografie), Größen, Abstände und Zustände wie Hover-Effekte. Er definiert, „wie" die Dinge aussehen. [1, 2, 3]
- Brand Guidelines / Brand Book: Bezieht sich oft auf die übergeordnete Markenidentität (Logonutzung, Tonalität, Bildsprache), enthält aber meist den visuellen Styleguide für Webanwendungen. [1, 2]
Differenzierung durch verwandte Begriffe[Bearbeiten]
In der Praxis werden oft folgende Begriffe synonym verwendet, auch wenn sie sich im Detail unterscheiden:
- Pattern Library: Eine spezialisierte Bibliothek, die wiederverwendbare UI-Elemente und deren funktionale Anordnung (z.B. Navigationsleisten, Karten-Layouts) enthält. [1]
- Component Library: Der technische Teil des Design Systems. Es handelt sich um eine Bibliothek von programmierbaren Elementen (z.B. React-Komponenten), die direkt im Code verwendet werden. [1, 2, 3]
- UI Kit (User Interface Kit): Eine statische Sammlung von Design-Elementen in Tools wie Figma oder Sketch. Es dient oft als Ausgangspunkt, ist aber weniger umfassend als ein echtes Design System. [1, 2]
- Frontend-Richtlinien / Coding Standards: Vorgaben, wie die Elemente technisch umzusetzen sind (z.B. CSS-Klassen für Hover-Effekte).
Was diese Dokumente beinhalten[Bearbeiten]
Die Richtlinien stellen sicher, dass alle Designer und Entwickler die gleiche „Sprache" sprechen. Dazu gehören: [1]
- Farben: Farbpaletten (primär, sekundär, semantische Farben für Fehlermeldungen).
- Typografie: Schriftfamilien, Gewichte, Größen, Zeilenhöhen.
- Raster & Abstände (Layout): Spacing-Systeme, Margins, Paddings.
- Interaktionen & States: Wie Buttons beim „Hover" (Schweben des Mauszeigers), Klick oder Focus reagieren.
- Icons & Bilder: Stilvorgaben für Bildsprache. [1, 2, 3]
Zusammenfassung[Bearbeiten]
Wenn es um eine ganzheitliche Sammlung inkl. Code geht, spricht man heute meist von einem Design System. Ist es nur das „Regelbuch" für das Aussehen, ist ein Styleguide der korrekte Begriff. [1]
