Modulare Strukturen & Atomic-Design Komponentenbasierte Layouts


Bei der Gestaltung und Realiserung ihres Webesigns 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 hat in der Praxis viele Vorteile und ist in großen Projekten gängige Praixis, welche sich u.a. beim strikten Anwenden des Atomic Designs zeigen. Hierzu zählen:

  • 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.
     
  • Lebendiger Styleguide: djfldfjdfdfld,fd
     
  • 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.

Was ist jetzt dieses Atomic-Design genau?

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/.


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

Niels Langlotz
Web-Entwickler

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

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