Es ist wichtig zu unterstreichen, dass ein Design System kein Styleguide (Dokument mit dem Fokus auf Stil und Visuelles) und auch keine Komponenten-Bibliothek (Dokument mit funktionalen Elementen und deren Code) ist, sondern im besten Szenario beide Aspekte beinhaltet. Es gibt mehrere Methoden zur Organisation von Designsystemen. Diese können mit folgenden drei Skalen abgebildet werden:
- Strikte und lockere Systeme: Wenn ein striktes System eine umfassende und detaillierte Dokumentation bietet und vollständig zwischen dem Design und der Entwicklung synchronisiert ist. Ein lockeres System lässt Platz für Experimente und bietet Freiheiten bezüglich dessen Nutzen.
- Modulare und integrierte Systeme: Modulare Systeme werden in austauschbare und wiederverwendbare Teile aufgeteilt. Ein integriertes System wiederum konzentriert sich auf einen einzigartigen Kontext, weshalb seine Elemente nicht austauschbar sein dürfen.
- Zentralisierte und verteilte Methoden zum Aufbau von Designsystemen: In einem zentralisierten Modell ist nur ein Team für das System verantwortlich. Es konzentriert sich auf die Bedürfnisse anderer Teams, um deren Arbeit zu erleichtern. In einem verteilten Modell bauen mehrere Teams das System auf.
Atomic Design
Der Begriff Atomic Design bezeichnet eine Design Methodologie von Brad Frost, welche die Entwicklung von Websites konsistenter und einfacher erweiterbar machen soll. Die Methode basiert auf der Idee ein komplexes Interface aus Einzelkomponenten systematisch aufzubauen. Mit Atomic Design baut man strikte und modulare Systeme, wobei eine Zusammenarbeit zwischen Programmierer/innen und Designer/innen hier auch erwünscht wird.
Die Nutzung von Designmethoden wie Atomic Design zur Organisation von Designsystemen in modulare Komponenten wird seit einiger Zeit besonders im Web Development als Best Practice gehandelt. Dennoch gehört diese Methode nicht zu den leicht anwendbaren, da sie viele Programmierkenntnisse und spezifische Denkweisen erfordert. Die Kernpunkte und eventuelle Probleme bei der Anwendung von Atomic Design werden in einem weiteren Artikel besprochen.
Quellen / Links
- https://uxdesign.cc/everything-you-need-to-know-about-design-systems-54b109851969
- http://bradfrost.com/blog/post/atomic-web-design
- Blogbeitrag „Everything you need to know about Design Systems“ von Audrey Hacq.
Wir entwickeln digitale Lösungen mit Leidenschaft
Warum wir das tun? Weil die Verwirklichung Ihrer Vision unser größter Anspruch und die schönste Anerkennung ist. Deshalb nehmen wir uns gerne ausreichend Zeit für die Realisierung Ihres digitalen Projekts.
Kontaktieren Sie uns, wir sind gerne für Ihre Fragen da:
