Design-System

Eintrag zuletzt aktualisiert am: 17.02.2022

Ein Design-System ist ein Sammlung von Richtlinien und wiederverwendbaren Vorlagen und Komponenten ("Baukasten") für die Gesaltung von Software und Websites.

In einem Design-System werden festgelegt

---

• Farben
• Typograhie
• Interaktionselemente wie Buttons
• Layout-Panels
• Formular-Vorlagen, z.B. Master-Details
• Rahmenanwendung: Menüs, Dialoge, Hilfe

Beispiele für Design-Systeme

---

• Twitter Bootstrap [https://getbootstrap.com]
• Google Material Design (Angular Material https://material.angular.io/, Vuetify https://vuetifyjs.com/en/)
• Microsoft Fluent Design System / Fluent UI [https://developer.microsoft.com/de-de/fluentui#/]
• Tailwind CSS [https://tailwindcss.com/]
• Ant Design [https://ant.design/]
• Bulma [https://bulma.io/]
• eFrolicss [https://efrolic.github.io/css/]
• Carbon Design [https://www.carbondesignsystem.com/]
• Lion [https://github.com/ing-bank/lion]
• Adobe Spectrum [https://spectrum.adobe.com/]
• ORGENIC UI [https://orgenic.org]