Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Dieter Petereit 26. April 2018

Atomic Design: So gestaltest du deine Website modular

Begrifflichkeiten im Webdesign sind häu­fig nicht viel mehr als Worthülsen. Der Begriff „Atomic Design” darf zu die­sen Hülsen gezählt wer­den. Denn er dient nur sei­nem Erfinder dazu, sei­ne Philosophie unter ein­präg­sa­mem Namen ver­brei­ten zu kön­nen. Dennoch lohnt es, sich mit den Inhalten aus­ein­an­der zu set­zen.

Atomic Design: Das steckt dahinter

Der Begriff „Atomic Design“ geis­tert seit fast einem hal­ben Jahrzehnt durch das Weltennetz. Erfunden von Brad Frost und inzwi­schen auch mit einem kom­plet­ten, online les­ba­ren Buch hin­ter­legt, lässt indes der Siegeszug auf sich war­ten. 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, bist du hier an der rich­ti­gen Adresse. Ich stel­le den theo­re­ti­schen Ansatz in aller Kürze dar, damit wir wis­sen, wovon eigent­lich die Rede ist. Interessiert dich das Konzept am Ende in der Tiefe, nut­ze die wei­ter oben gesetz­ten Links zu Brads Websites, ins­be­son­de­re zum E-Book.

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

„Atomic Design“ ist wört­lich gemeint. Es geht vom Atom als kleins­tem Bestandteil eines Designs aus. Ein Atom ist bei­spiels­wei­se ein HTML-Tag oder ein Font oder eine ande­re, nicht wei­ter ver­kleiner­ba­re Einheit im Design-System. Ein Molekül ist dann ein Konglomerat meh­re­rer Atome, die gemein­sam (als Molekül) eine Aufgabe lösen. Das könn­te zum Beispiel ein voll­stän­di­ges HTML-Formular sein. Die nächst­grö­ße­re Einheit bezeich­net Frost als Organismus. In einer sol­chen Einheit spie­len meh­re­re Moleküle zusam­men eine ziel­ge­rich­te­te Rolle. Ein Organismus könn­te bei­spiels­wei­se ein kom­plet­ter Seitenheader oder -foo­ter oder der Bereich mit aktu­el­len News sein. Ich den­ke, du kannst dir vor­stel­len, was gemeint ist.

Ab die­sem Punkt ver­lässt Frost die Analogie zur Sprache der Chemie. Nach dem Organismus kommt das Template, die Vorstufe der eigent­li­chen Pages. Letztere sind die dem Besucher schluss­end­lich zugäng­li­chen Seiten mit allen akti­ven Inhalten, wäh­rend die Templates die Vorlagen sind, in die eben jene Inhalte spä­ter ein­flie­ßen sol­len.

Das war es im Grunde auch schon.

Atomic Design: Neu ist nur der Begriff

Nanu, mag sich der eine oder ande­re gestan­de­ne Webentwickler nun sagen, das habe ich doch noch nie anders gemacht. Allerdings wäre ich nicht auf die Idee gekom­men, der­lei Begrifflichkeiten zu ver­wen­den. Wenn du eben­falls so denkst, will­kom­men. Das ist auch mein Verständnis die­ser Sache.

Es klingt natür­lich pri­ma und pseu­do­wis­sen­schaft­lich, wenn wir von Atomen, Molekülen und so wei­ter reden. Einen ech­ten eigen­stän­di­gen Nutzwert hat das indes nicht. Vielmehr ist es ja ledig­lich logisch, dass wir Seiten auf der Basis von Templates, die wir mit ver­schie­de­nen Funktions- und Layoutblöcken gefüllt haben, bau­en. Ob ich das dann Atome, Moleküle oder ganz anders nen­ne, spielt letzt­lich kei­ne Rolle.

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

Insofern darf man mit eini­ger Berechtigung sagen, dass „Atomic Design“ nur alter Wein in neu­en Schläuchen ist. Und an die­ser Stelle klärt sich auch die Frage, ob „Atomic Design“ nun den Siegeszug ange­tre­ten hat oder nicht: Das hat es, aller­dings nicht not­wen­di­ger­wei­se unter die­ser Bezeichnung. **

Einen Vorteil der Verwendung der Begrifflichkeit an sich kann ich durch­aus erken­nen, die­ser ist aber mehr psy­cho­lo­gi­scher Natur. Dadurch, dass wir von „Atomic Design“ spre­chen, schaf­fen wir ein Bewusstsein, ein Mindset, das direkt in die rich­ti­ge Richtung weist. Wir errei­chen, dass wir uns bewusst auf die Kleinteiligkeit des Designansatzes fokus­sie­ren und nicht gleich­sam zufäl­lig rich­tig gestal­ten.

Dabei dürf­te es wohl unstrit­tig sein, dass ein Designansatz gene­rell immer vom kleins­ten zum größ­ten Teil ablau­fen soll­te. Nicht zuletzt das respon­si­ve Design zwingt uns fast schon zu die­ser Vorgehensweise. Doch ob frei­wil­lig oder nicht, für den Ansatz gibt es durch­aus hand­fes­te Gründe.

Argumente für ein Design im Baukastensystem

Obwohl Häuser durch­aus unter­schied­lich aus­se­hen kön­nen, hat man sich in der Bauwirtschaft auf ein gemein­sa­mes modu­la­res System geei­nigt, nach­dem im Prinzip jedes Haus in glei­cher Weise gebaut wird. Decken-, Wand- und Dachelemente wer­den zuge­lie­fert und ver­baut. Ebenso ver­hält es sich mit Fenstern, Türen und so wei­ter. Individuell ist letzt­lich nur die Zahl der ver­bau­ten Elemente sowie deren Optik.

In glei­cher Weise ver­hält es sich in unse­rer Branche. Auch wenn du behaup­ten magst, du bau­test jede Seite indi­vi­du­ell nach den Vorgaben und Sinnhaftigkeiten, die der jewei­li­ge Kunde macht bezie­hungs­wei­se impli­ziert, so ist die Wahrheit doch die, dass jeder von uns über Jahre gepfleg­te und ver­bes­ser­te Snippets für die unter­schied­lichs­ten Funktionalitäten gebun­kert hat und immer wie­der ger­ne ein­setzt. Das ist nicht etwa eine Schande, son­dern ein Gebot der Vernunft, nicht zuletzt unter wirt­schaft­li­chen Aspekten.

Wireframing als Konzeptionsmethode. (Foto: Depositphotos)

Das fängt schon beim Wireframing an. Das Wireframing ist eine Konzeptionsweise, die den Ansatz des „Atomic Design“ bild­lich erfahr­bar macht. In gro­ben Inhaltsblöcken skiz­zie­ren wir, wie die Seite struk­tu­riert wer­den und wel­che Funktionalität wo zu erwar­ten sein soll. So kön­nen wir ein Projekt von unten nach oben durch­den­ken, ohne uns bereits in den Details der Gestaltung zu ver­lie­ren.

Wir könn­ten also sagen, dass „Atomic Design“ dabei hilft, den Überblick zu bewah­ren. Und natür­lich hilft der ande­re gedank­li­che Ansatz schon vom Start weg dabei, Code-Blöcke zu erstel­len, die gut wie­der­ver­wend­bar sind. Ohne den Ansatz könn­test du durch­aus weni­ger fokus­siert auf die­sen Punkt sein.

Fassen wir die Vorteile des Denkansatzes, nenn ihn „Atomic Design” oder nicht, kurz zusam­men, kommt dabei eine schö­ne Liste mit eini­gem Nutzwert zusam­men:

Du hast einen Fundus an belie­big zusam­men­steck­ba­ren Modulen

Wenn du dich tat­säch­lich streng an den Ansatz hältst, hast du ein Arsenal fer­ti­ger Funktionsmodule an der Hand, die du belie­big zusam­men­stöp­seln kannst. Innerhalb der gege­be­nen Hierarchie bist du frei im Einsatz und stellst auf die­se Weise schnell min­des­tens Prototypen her.

Dein Style Guide ent­steht qua­si auto­ma­tisch

Da du auf ato­ma­rer Ebene gestal­test, kannst du die Einzelteile direkt als Style Guide ver­wen­den. Oder, noch anders aus­ge­drückt, du benö­tigst gar kei­nen sol­chen mehr, denn die Verwendung der Kleinteile sorgt auto­ma­tisch für ein kon­sis­ten­tes Design.

Auch die Code-Basis ist zwangs­läu­fig kon­sis­tent, was zum ein­fa­che­ren Verständnis der Funktionsmodule bei­trägt.

Dein Gestaltungsanspruch bleibt prak­ti­scher

Wenn du frei gestal­ten kannst, neigst du dazu, sei­ten­ba­siert zu lay­ou­ten. Das ist ganz nor­mal und ent­spricht alten Gewohnheiten. Gestaltest du ato­mar, geht es mehr dar­um, ein funk­tio­nie­ren­des Design zu erstel­len, das mit den gege­be­nen Bausteinen ordent­lich aus­sieht. Durch die Kleinteiligkeit der Herangehensweise ist „mobi­le first” qua­si der nati­ve Denkansatz.

Logisch, dass auch das Prototyping, wenn du es denn über­haupt noch so ver­stan­den wis­sen willst, sich beschleu­nigt. Deine ers­ten Vorschläge lie­gen weit­aus schnel­ler vor.

So stark unter­schei­den sich Atomic Design und der Bau eines Hauses nicht. (Foto: Depositphotos)

Deine Website bleibt leich­ter pfleg­bar

Wenn du kon­se­quent mit der Hierarchie des „Atomic Design” arbei­test, ist es dir ein leich­tes, Blöcke zu ent­neh­men, zu erset­zen, umzu­stel­len. Dadurch ist die akti­ve Pflege dei­ner Website nicht unbe­dingt so ein­fach wie das Legen einer Patience, aber doch ähn­lich struk­tu­riert.

Der Ansatz lässt sich aus­wei­ten

Hast du den Atomic-Ansatz erst ein­mal ver­in­ner­licht, wird dir auf­fal­len, dass nicht nur dein HTML-Markup pro­fi­tie­ren kann. Auch mit CSS, JavaScript und ande­ren Technologien kannst du so ver­fah­ren. Gerade JavaScript bie­tet da Potenzial.

Fazit: Atomic Design an sich ist eine gute Sache

Du siehst, „Atomic Design” ist eine gute Sache. Ob du klein­tei­li­ges Gestalten nun so bezeich­nen willst oder nicht, bleibt dir über­las­sen. Möchtest du ein biss­chen mit Brads Ansatz expe­ri­men­tie­ren, dann schau mal beim Pattern Lab vor­bei. Hier kannst du dich mit dem Denkmodell ver­traut machen. Kennst du Bootstrap, wird dich das nicht über­mä­ßig anstren­gen.

(Bildnachweis: Das Artikelbild ist eine Komposition aus die­ser Illustration eines Atoms und die­sem Bild. Das Material stammt von Depositphotos.)

Dieter Petereit

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design.

Ein Kommentar

  1. Pattern Lab ist wirk­lich eines der bes­ten Tools, wenn man mit Bootstrap arbei­ten will, kann ich auch nur emp­feh­len. Aber es eig­net sich sogar für Konzeptentwicklung, wenn man mit der Vorgabe arbei­tet, dass die Seite mit Bootstrap umge­setzt wer­den soll. Dann haben Konzepter, Designer und Programmierer einen gemein­sa­men Rahmen, und kön­nen sich aus der “Bibliothek” bedie­nen.

Schreibe einen Kommentar zu Dorothee Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.