Frontend-Architektur für Designsysteme

Kapitel 16. Musterbibliotheken

Diese Arbeit wurde mithilfe von KI übersetzt. Wir freuen uns über dein Feedback und deine Kommentare: [e-mail]

Falls du die Atomic Design-Prinzipien von Brad Frost noch nicht kennst, möchte ich dir eine kurze Einführung geben. Sie werden zweifelsohne deine Sichtweise auf das Design einer Website verändern, deshalb solltest du dich bei Gelegenheit eingehender mit ihnen beschäftigen.

Atomic Design ist eine Methode zum Aufbau von Web-Design-Systemen. Anstatt ganze Seiten nacheinander zu entwerfen, beginnt Atomic Design damit, häufig verwendete Elemente in unterschiedlich große Muster zu zerlegen, und beschreibt einen Prozess, um diese Bausteine wieder zu kombinieren, bis eine ganze Seite entsteht. Das kleinste dieser Muster, das Element, das nicht weiter aufgeschlüsselt werden kann, wird als Atom bezeichnet.

Atome sind die Grundbausteine unserer Websites, die aus Überschriften, Listen, Bildern und Videos sowie Formularelementen bestehen.

So wie sich Atome in der Natur zu komplexeren Gebilden zusammenschließen, verbindet Atomic Design mehrere Atome zu Molekülen. Ein Molekül kann ein Suchformular, einen Medienblock oder ein Navigationssystem darstellen .

Genauso wie Moleküle aus der Kombination mehrerer Atome entstehen, setzt sich ein Organismus aus mehreren Molekülen zusammen, um einen "bestimmten Abschnitt einer Schnittstelle" wie einen Blogartikel oder einen Kommentar zu erstellen.

Schließlich erstellen wir Templates, die die ...