Was sind Styleguides und Designsysteme?
Styleguides und Designsysteme sind verwandte Werkzeuge, um eine einheitliche Gestaltung von Websites, Produkten und anderem sicherzustellen. Ein Styleguide ist ein Regelwerk, das die grundlegenden visuellen Elemente einer Marke definiert – also Farben, Schriftarten, Bildsprache, das Logo und seine Verwendung sowie grundlegende Layoutregeln. Styleguides konzentrieren sich auf die Frage „Wie sieht es aus?“. Sie sind sozusagen die visuelle „Grammatik“ einer Marke. Ein Designsystem ist umfassender und geht über die visuellen Aspekte hinaus: Es integriert UI-Komponenten (Buttons, Formulare etc.), Interaktionsmuster, Code-Bibliotheken, Richtlinien für Barrierefreiheit etc. Während ein Styleguide grobe Regeln beschreibt, bietet ein Designsystem außerdem konkrete Bausteine und Werkzeuge zur Umsetzung dieser Regeln. Vereinfacht: Der Styleguide sagt, wie etwas aussehen soll; das Designsystem liefert zusätzlich die Komponenten, mit denen es umgesetzt werden kann.
Grundlagen von Style Guides
Der Webflow-Blog-Artikel How to create a website style guide ist ein praxisnaher Einstieg, um einen eigenen Styleguide zu erstellen. Er erklärt die Grundprinzipien anhand konkreter Beispiel. Der in Webflow erstellte Style Guide EDU demonstriert anschaulich, wie ein Styleguide aussehen kann. Es zeigt Designelemente und erklärt gleichzeitig deren Anwendung.
Praktische Beispiele für Styleguides und Designsysteme
Das GOV.UK Design System der britischen Regierung ist unglaublich durchdacht, sinnvoll gestaltet und eine höchst inspirierende Vorlage. Es zeigt, wie ein kohärentes, zugängliches Designsystem aussehen kann, das höchste Anforderungen an Usability und Barrierefreiheit erfüllt.
Der Styleguide der Bundesregierung steht dem in nicht viel nach. Interessant ist die detaillierte Dokumentation aller Basiselemente wie Farben, Typografie und Logos für sämtliche Kommunikationskanäle – von Office-Dokumenten bis hin zu digitalen Medien.
Die IBM Design Language ist ein ganzheitliches System, das Philosophie, Prinzipien und praktische Anwendungen beschreibt.
Das Firefox Design System spiegelt Mozillas Mission wider, das Internet zu demokratisieren und stellt ein transparentes, zugängliches Designsystem bereit. Besonders ist die verständliche Sprache, die es auch Nicht-Profis ermöglicht, die Prinzipien anzuwenden. Es ist das visuell am ansprechendsten umgesetzte Beispiel für meinen Geschmack.
Das Atlassian Design System wirkt sorgfältig durchdacht, technisch präzise und umfassend.
Noch viel mehr Tipps zum Erstellen Ihrer eigenen Website finden Sie im Buch:
Websites schneller und vor allem besser erstellen – mit künstlicher und menschlicher Intelligenz.
