Modulare Strukturen

Modulare Strukturen & Atomic-Design Komponentenbasierte Layouts


Bei der Gestaltung und Realisierung ihres Webdesigns ist es durchaus sehr sinnvoll nicht alles in einem großen Projektfile umsetzen, sondern für allgemeingültige Szenarien einzelne Komponenten zu definieren und diese in Module zu gliedern. Dieses Vorgehen hat in der Praxis viele Vorteile und ist in großen Projekten bereits ein Best-Praktiken-Ansatz, welcher sich u.a. beim strikten Anwenden des Atomic Designs einfach umsetzen lässt.

Wiederverwendbarkeit der Module ist auch für ihre Projekte essenziell?

Niels Langlotz
Web-Entwickler

Tel: +49 176 45 606 488
E-Mail: info(at)typoniels.de

Meine Erfahrung als Entwickler setze ich für Sie gerne bei ihrem nächsten Projekt mit ein, sprechen Sie mich einfach an.

Häufige Fragen & Antworten

Die Antwort auf folgende Fragen könnte Sie auch interessieren

  • Wiederverwendbarkeit
    Wird ein Atom angelegt, kann es später leicht für andere Entwürfe wiederverwendet werden. Eine erneute Definition wird nicht notwendig. Auf diese Weise können Webentwickler Zeit einsparen. Für Auftraggeber können dadurch die Entwicklungskosten sinken. Zudem sind neue Designentwürfe aufgrund des modularen Aufbaus schneller möglich.
  • Einheitlichkeit
    Durch den sukzessiven Aufbau eines Designentwurfs kann eine höhere Einheitlichkeit erzielt werden. Je höher die Ebene im Designkonzept, desto weniger Aufwand ist nötig, um Änderungen zu erzielen.
  • Erweiterbarkeit
    Der größte Vorteil besteht in der einfachen Erweiterung bestehender Systeme. So können neue Atome oder auch Moleküle eingefügt werden, ohne dass dafür die komplette Struktur erneut programmiert oder entwickelt werden muss. Ebenso ist es möglich, die bestehenden Moleküle oder Organismen neu zu kombinieren.
  • Handhabung
    Selbst komplexe Systeme können durch den methodischen Designaufbau einfacher nachvollzogen werden. Der Quellcode ist in der Regel logischer aufgebaut, sodass Änderungen daran einfacher durchzuführen sind. Entwickler können die betreffenden Code-Segmente schneller identifizieren.

Atomic Design ist ein Ansatz im Webdesign, der von Brad Frost entwickelt wurde und beruht auf der Vorstellung, dass ein Designsystem ähnlich wie chemische Elemente aufgebaut ist. Der Vorteil dieser Designmethode besteht darin, dass verschiedene Elemente mehrfach verwendet werden können und sich das Webdesign einfach modifizieren lässt. Das Atomic Design besteht dabei aus fünf Elementen, die aufeinander aufbauen: Atomen, Molekülen, Organismen, Templates und Seiten.

Eine ausführliche Einführung und Erklärung der Vorteile des Atomic-Designs finden Sie im Orginal-Post von Brad Frost unter bradfrost.com/blog/post/atomic-web-design/, sowie im t3n-Blog unter t3n.de/news/atomic-design-baukastensystem-721010/.

Für den effizienten Aufbau einer Pattern-Bibliothek nach dem Atomic Design-Ansatz bietet es sich meiner Meinung nach perfekt an, damit schon während der Entwicklung eines Prototypen / Klickdummy zu starten und diese Basis dann kontinuierlich auszubauen. Denn so entstehen quasi ganz automatisch die benötigen Elemente in einer gut dokumentierten Form.