Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

News

Atomic Design, das Baukastensystem mit dem schicken Namen

„Atomic Design“ ist kaum mehr als ein anderes Wort für vernünftige Vorgehensweisen im Webdesign. (Foto: Pixabay)

Die Gemeinde der Webdesigner und -entwickler war noch nie verlegen darum, neue Begrifflichkeiten zu erschaffen. Ein Wörterbuch „Deutsch-Webentwickler“ gibt es wahrscheinlich nur deshalb noch nicht, weil es ein mehrbändiges Werk wäre, für das einfach der Markt zu klein ist. Einer dieser Begriffe, die einem immer wieder über den Weg laufen, ist „Atomic Design“.

Atomic Design: Das Grundkonzept

Der Begriff „Atomic Design“ geistert seit gut drei Jahren durch das Weltennetz. Erfunden von Brad Frost und inzwischen auch mit einem kompletten, online lesbaren Buch hinterlegt, lässt indes der Siegeszug auf sich warten. Oder etwa doch nicht? Das hängt ganz davon ab, wie man auf das Phänomen schaut.

Wenn du noch nichts von „Atomic Design“ gehört hast, lies die folgenden Zeilen. Ich stelle den theoretischen Ansatz in aller Kürze dar, damit wir wissen, wovon hier eigentlich die Rede ist. Interessiert dich das Konzept am Ende in der Tiefe, nutze die weiter oben gesetzten Links zu Brads Websites, insbesondere zum eBook.

Die fünf Bestandteile des Atomic Design (Illustration: Brad Frost)
Die fünf Bestandteile des Atomic Design. (Illustration: Brad Frost)

„Atomic Design“ ist wörtlich gemeint. Es geht vom Atom als kleinstem Bestandteil eines Designs aus. Ein Atom ist beispielsweise ein HTML-Tag oder ein Font oder eine andere, nicht weiter verkleinerbare Einheit im Design-System. Ein Molekül ist dann ein Konglomerat mehrerer Atome, die gemeinsam (als Molekül) eine Aufgabe lösen. Das könnte zum Beispiel ein vollständiges HTML-Formular sein. Die nächstgrößere Einheit bezeichnet Frost als Organismus. In einer solchen Einheit spielen mehrere Moleküle zusammen eine zielgerichtete Rolle. Ein Organismus könnte beispielsweise ein kompletter Seitenheader oder -footer oder der Bereich mit aktuellen News sein. Ich denke, du kannst dir vorstellen, was gemeint ist.

Ab diesem Punkt verlässt Frost die Analogie zur Sprache der Chemie. Nach dem Organismus kommt das Template, die Vorstufe der eigentlichen Pages. Letztere sind die dem Besucher schlussendlich zugänglichen Seiten mit allen aktiven Inhalten, während die Templates die Vorlagen sind, in die eben jene Inhalte später einfließen sollen.

Das war es im Grunde auch schon.

Atomic Design: Alter Wein in neuen Schläuchen

Nanu, mag sich der eine oder andere gestandene Webentwickler nun sagen, das habe ich doch noch nie anders gemacht. Allerdings wäre ich nicht auf die Idee gekommen, derlei Begrifflichkeiten zu verwenden. Wenn du ebenfalls so denkst, willkommen. Das ist tatsächlich auch mein Verständnis dieser Sache.

Es klingt natürlich prima und pseudowissenschaftlich, wenn wir von Atomen, Molekülen und so weiter reden. Einen echten eigenständigen Nutzwert hat das indes nicht. Vielmehr ist es ja lediglich logisch, dass wir Seiten auf der Basis von Templates, die wir mit verschiedenen Funktions- und Layoutblöcken gefüllt haben, bauen. Ob ich das dann Atome, Moleküle oder ganz anders nenne, spielt letztlich keine Rolle.

Das Periodensystem der HTML-Elemente (Illustration: Josh Duck)
Das Periodensystem der HTML-Elemente. (Illustration: Josh Duck)

Insofern darf man mit einiger Berechtigung sagen, dass „Atomic Design“ nur alter Wein in neuen Schläuchen ist. Und an dieser Stelle klärt sich auch die Frage, ob „Atomic Design“ nun den Siegeszug angetreten hat oder nicht: Das hat es, allerdings nicht notwendigerweise unter dieser Bezeichnung.

„Atomic Design“: Alter Wein in neuen Schläuchen

Einen Vorteil kann ich durchaus erkennen, dieser ist aber mehr psychologischer Natur. Dadurch, dass man von „Atomic Design“ spricht, schafft man ein Bewusstsein, ein Mindset, das direkt in die richtige Richtung weist. Man erreicht, dass sich der Entwickler bewusst auf die Kleinteiligkeit des Designansatzes fokussiert und nicht gleichsam zufällig richtig gestaltet.

Dabei dürfte es wohl unstrittig sein, dass ein Designansatz generell immer vom kleinsten zum größten Teil ablaufen sollte. Nicht zuletzt das responsive Design zwingt uns fast schon zu dieser Vorgehensweise. Doch ob freiwillig oder nicht, für den Ansatz gibt es durchaus handfeste Gründe.

Argumente für ein Design im Baukastensystem

Obwohl Häuser durchaus unterschiedlich aussehen können, hat man sich in der Bauwirtschaft auf ein gemeinsames modulares System geeinigt, nachdem im Prinzip jedes Haus in gleicher Weise gebaut wird. Decken-, Wand- und Dachelemente werden zugeliefert und verbaut. Ebenso verhält es sich mit Fenstern, Türen und so weiter. Individuell ist letztlich nur die Zahl der verbauten Elemente sowie deren Optik.

In gleicher Weise verhält es sich in unserer Branche. Auch wenn vielfach behauptet wird, man baue jede Seite individuell nach den Vorgaben und Sinnhaftigkeiten, die der jeweilige Kunde vorgebe beziehungsweise impliziere, so ist die Wahrheit doch die, dass jeder von uns über Jahre gepflegte und verbesserte Snippets für die unterschiedlichsten Funktionalitäten gebunkert hat und immer wieder gerne einsetzt. Das ist nicht etwa eine Schande, sondern ein Gebot der Vernunft, nicht zuletzt unter wirtschaftlichen Aspekten.

paper-1330887_640
Wireframing als Konzeptionsmethode. (Foto: Pixabay)

Das Wireframing ist eine Konzeptionsweise, die den Ansatz des „Atomic Design“ bildlich erfahrbar macht. In groben Inhaltsblöcken wird skizziert, wie die Seite strukturiert werden soll und welche Funktionalität wo zu erwarten ist. So kann ein Projekt von unten nach oben durchdacht werden, ohne sich bereits in den Details der Gestaltung zu verlieren. Man könnte also sagen, dass „Atomic Design“ dabei hilft, den Überblick zu bewahren.

Zudem wird man beim bewussten darüber Nachdenken viel eher Code-Blöcke erstellen, die gut wiederverwendbar sind, als wenn man ohne diesen Fokus an die Arbeit ginge. Dadurch wird dann der Code leichter pflegbar. Weitere Argumente hat Richard Bray in diesem Beitrag für den Creative Bloq zusammengetragen.

Bitte beachte unsere Community-Richtlinien

5 Reaktionen
Dari4sho

Ich nutze ein ähnliche, selbstentwickeltes System auf gulp-Basis - dabei ist alles in Blocks, Shared-Modules und Layout (Base) aufgeteilt. Für das Styling nutze ich den OOCSS-Ansatz (https://www.smashingmagazine.com/2011/12/an-introduction-to-object-oriented-css-oocss/). Kann ich nur empfehlen.

David Karich

Dieser Moment, wenn man unerwartet sein Bild von Pixabay in einem Artikel sieht. ^^

Dieter Petereit

Das soll ich aber jetzt nicht als Vorwurf verstehen, oder?

David Karich

Nein, in keinster Weise. Freut mich ja, wenn die Bilder Verwendung finden. Habe ich nur nicht damit gerechnet, wenn man am Montagmorgen sich durch das Internet wühlt. :D Und auch wenn nicht nötigt, freut man sich immer gern auf einen Namensverweis. :P

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Finde einen Job, den du liebst