Skip to content

Commit

Permalink
Update README.md
Browse files Browse the repository at this point in the history
  • Loading branch information
Malte Weber authored Dec 6, 2024
1 parent 1fc10c8 commit 0d7289d
Showing 1 changed file with 5 additions and 6 deletions.
11 changes: 5 additions & 6 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,24 +1,23 @@
![Designsystem-Headerbild der Staatsbibliothek zu Berlin in einem dunklen Blauton. Im Hintergrund ein abstraktes Muster mit geometrischen Formen, die an Kreise und Linien erinnern. In der Mitte des Bildes steht in weißer Schrift: ‚Staatsbibliothek zu Berlin DESIGNSYSTEM‘.](https://github.com/StabiBerlin/design-tokens/blob/main/Design_System_Header.jpg)
# Design Systen - Staatsbibliothek zu Berlin
## 📘 Beschreibung
## Beschreibung
Wir entwickeln eine zentrale Anlaufstelle für Standards zur Gestaltung digitaler Produkte der Stabi.
Das Design System ist ein gemeinsamer Satz wiederverwendbarer Komponenten, Muster und Richtlinien. Hiermit wollen wir die Entwicklung konsistenter, nutzerfreundlicher Produkte beschleunigen und eine nahtlose, kohärente Nutzererfahrung aufbauen. Mit dem Strategiepapier „Stabi 2030“ hat die Staatsbibliothek ihre Ausrichtung auf Nutzerzentrierung und Barrierefreiheit digitaler Systeme weiter gestärkt. Als „Single Source of Truth“ unterstützt das Design System diese strategischen Ziele, indem es die Grundlage für nutzerzentrierte und barrierearme digitale Services schafft.
Das Design System ist ein gemeinsamer Satz wiederverwendbarer Komponenten, Muster und Richtlinien. Hiermit wollen wir die Entwicklung konsistenter, nutzerfreundlicher Produkte beschleunigen und eine nahtlose, kohärente Nutzererfahrung aufbauen. Mit dem Strategiepapier „Stabi 2030“ hat die Staatsbibliothek ihre Ausrichtung auf Nutzerzentrierung und Barrierefreiheit digitaler Systeme weiter gestärkt. Das Design System unterstützt diese strategischen Ziele, indem es die Grundlage für nutzendenzentrierte und barrierearme digitale Services schafft.

## 🎯 Motivation
## Motivation
* **Konsistenz:** Alle digitalen Produkte folgen denselben visuellen und funktionalen Standards und stärken so das Nutzererlebnis und die Markenwahrnehmung. Auch wenn mehrere Teams parallel an verschiedenen Produkten arbeiten, sorgt das Design System für ein kohärentes Nutzererlebnis.
* **Effizienz:** Statt jedes Mal von vorne anzufangen, können die Teams direkt auf bereits entwickelte, getestete Bausteine zurückgreifen. So starten Projekte zügig und erhalten von Beginn an ein professionelles, einheitliches Erscheinungsbild. Durch die Wiederverwendbarkeit bestehender Komponenten sparen die Teams Zeit, die sie stattdessen in Features oder andere Projekte investieren können.
* **Skalierbarkeit und Anpassungsfähigkeit:** Das Design System ist flexibel genug, um sich an neue Anforderungen anzupassen und stellt sicher, dass alle digitalen Produkte auch in Zukunft denselben Standards folgen.
* **Nutzendentrierung:** Das Design System unterstützt dabei, die digitalen Produkte konsequent an den Bedürfnissen der Nutzenden auszurichten, indem es klare Richtlinien und erprobte Muster bereitstellt, die intuitive und nutzendenfreundliche Erlebnisse fördern.
* **Barrierefreiheit:** Unsere Komponenten erfüllen aktuelle Standards und erleichtern es, barrierearme und nutzerzentrierte Produkte zu schaffen – ohne großen zusätzlichen Aufwand. Jede Anpassung fließt systemweit ein und sichert nachhaltige Qualität.

## 📦 Umfang
## Umfang
* [Figma File für die Dokumentation des Design Systems](https://www.figma.com/design/5Ribk1gHzE5UFiAPnyWv9n/DESIGN-SYSTEM?node-id=1039-9&t=LgZXIeiM8r03UBps-1)
* Figma Komponenten um UIs schnell nach Stabi Richtlinien zu entwerfen (👷in Arbeit)
* Foundation Design Tokens: Zentrale Variablen, die Design-Informationen wie Farben, Abstände, Schriftgrößen und weitere stilistische Eigenschaften speichern
* Bereitstellung des Design Systems über ein CDN (👷in Arbeit)
* Eine Komponetenbibliothek aufbauend auf den Design Tokens (👷in Arbeit)

## 👩‍💻 Verwendung
## Verwendung
Die Design Tokens sind derzeit als CSS- und SCSS-Variablen verfügbar und liegen im build-Ordner.
Sie können lokal eingebunden oder direkt über den GitHub-Link variables.css integriert werden. Falls zusätzliche Ausgabeformate erforderlich sind, steht das Design-Team für Rückfragen zur Verfügung.
### Installation
Expand Down

0 comments on commit 0d7289d

Please sign in to comment.