Atomic Design: Über den Aufbau von Webseiten mit Designsystemen

Lese­dau­er: ca. 4–5 Minuten

Web­sei­ten sind heut­zu­ta­ge oft sehr kom­ple­xe Pro­jek­te, an denen ver­schie­de­ne Akteu­re gleich­zei­tig arbei­ten. Um dabei nicht den Über­blick zu ver­lie­ren, hilft das Ato­mic Design — die Ein­tei­lung von Web Lay­outs in auf­ein­an­der auf­bau­en­de Ein­hei­ten. Zusam­men­ge­fasst spricht man dabei auch von einem Design­sys­tem. Warum wir von der Metho­de des Ato­mic Designs über­zeugt sind und wie es rich­tig ange­wandt wird, erklä­ren wir im Folgenden.

Von der Chemie zum Web Design

Der Begriff Ato­mic Design geht auf den Web Desi­gner und Autor Brad Frost zurück, der nach einer Metho­de gesucht hat, mit der Web­sei­ten sys­te­ma­tisch kon­stru­iert werden kön­nen. Ato­mic Design hat nichts mit sub­jek­ti­ven Eigen­schaf­ten wie Farbe, Typo­gra­fie, Ras­ter, Tex­tur und der­glei­chen zu tun, son­dern beruht auf dem Gedan­ken aus der Che­mie, dass alle Mate­rie (ob fest, flüs­sig, gas­för­mig, ein­fach, kom­plex, usw.) aus Ato­men besteht. Diese ato­ma­ren Ein­hei­ten ver­bin­den sich zu Mole­kü­len, die sich wie­der­um zu kom­ple­xe­ren Orga­nis­men zusam­men­schlie­ßen und schließ­lich die gesam­te Mate­rie in unse­rem Uni­ver­sum bil­den. In ähn­li­cher Weise set­zen sich Schnitt­stel­len im Web­de­sign aus klei­ne­ren Kom­po­nen­ten zusam­men. Das bedeu­tet, dass wir ganze Web­pro­jek­te in ihre grund­le­gends­ten Bau­stei­ne zer­le­gen um sie anschlie­ßend in kom­ple­xen Ein­hei­ten zu kom­bi­nie­ren. Das ist der Grund­ge­dan­ke des Ato­mic Designs.

Fünf Ebenen des Atomic Design

Design­sys­te­me werden nach der Ato­mic Design Metho­de in einem Pro­zess aus fünf ver­schie­de­nen Stu­fen aufgebaut: 

1. Atome
2. Mole­kü­le
3. Orga­nis­men
4. Vor­la­gen
5. Sei­ten

Dem User fällt bei einer Web­sei­te meist nur die 5. Stufe auf — die fer­ti­ge Seite als ein gan­zes Ele­ment. Erst wenn man zu Kli­cken beginnt und sich auf den Unter­sei­ten auf­hält fällt einem auf, dass sich gewis­se Ele­men­te wie­der­ho­len. Betrach­ten wir die ein­zel­nen Stu­fen im Detail.

1. Atome

Atome sind die kleins­ten Grund­bau­stei­ne der Mate­rie. Auf Web­schnitt­stel­len ange­wandt, sind Atome unse­re HTML-Tags, wie z. B. eine For­mu­lar­be­schrif­tung, eine Ein­ga­be oder eine Schalt­flä­che. Atome kön­nen auch abs­trak­te­re Ele­men­te wie Farb­pa­let­ten, Schrift­ar­ten und sogar unsicht­ba­re­re Aspek­te einer Schnitt­stel­le wie Ani­ma­tio­nen umfas­sen. Wie Atome in der Natur sind sie ziem­lich abs­trakt und für sich genom­men oft nicht sehr nütz­lich. Sie eig­nen sich jedoch gut als Refe­renz im Kon­text einer Mus­ter­bi­blio­thek, um alle ver­wen­de­ten Stile auf einen Blick sehen können.

2. Moleküle 

Bei der nächs­ten Stufe geht es darum Atome mit­ein­an­der zu kom­bi­nie­ren. Mole­kü­le sind Grup­pen von Ato­men, die mit­ein­an­der ver­bun­den sind und die kleins­ten Grund­ein­hei­ten einer Ver­bin­dung dar­stel­len. Diese Mole­kü­le haben ihre eige­nen Eigen­schaf­ten und bil­den das Rück­grat eines Design­sys­tems. Zum Bei­spiel sind ein For­mu­la­re­ti­kett, eine Ein­ga­be oder eine Schalt­flä­che für sich genom­men nicht sehr nütz­lich, aber wenn man sie zu einem For­mu­lar zusam­men­fügt, haben sie gemein­sam einen Zweck. Mole­kü­le kön­nen zwar kom­plex sein, aber in der Regel han­delt es sich um rela­tiv ein­fa­che Kom­bi­na­tio­nen von Ato­men, die im Anschluss häu­fig wie­der­ver­wen­det werden.

3. Organismen

Beim nächs­ten Schritt fügen sich die klei­nen Teile einer Web­site wei­ter zusam­men und nehmen nun lang­sam Gestalt an. Mole­kü­le kön­nen nun wie­der­um mit­ein­an­der kom­bi­niert werden, um Orga­nis­men zu bil­den. Orga­nis­men sind Grup­pen von Mole­kü­len, die mit­ein­an­der ver­bun­den sind und einen rela­tiv kom­ple­xen, abge­grenz­ten Abschnitt einer Schnitt­stel­le bil­den. Ein Kunde ist viel­leicht nicht son­der­lich an den Mole­kü­len eines Design­sys­tems inter­es­siert, aber unter Orga­nis­men kann er sich schon am ehes­ten etwas vor­stel­len. Orga­nis­men kön­nen aus ähn­li­chen und/oder unter­schied­li­chen Mole­kül­ar­ten bestehen. Ein Orga­nis­mus für das Impres­sum kann bei­spiels­wei­se aus ver­schie­de­nen Kom­po­nen­ten wie einem Logo, einer Haupt­na­vi­ga­ti­on, einem Such­for­mu­lar und einer Liste von Social-Media-Kanä­len bestehen. Ein “Produktgitter”-Organismus hin­ge­gen könn­te aus ein und dem­sel­ben Mole­kül bestehen (das mög­li­cher­wei­se ein Pro­dukt­bild, einen Pro­dukt­ti­tel und einen Preis ent­hält), das sich immer und immer wie­der wie­der­holt. Der Auf­bau von Mole­kü­len zu Orga­nis­men schafft somit eigen­stän­di­ge, por­ta­ble, wie­der­ver­wend­ba­re Kom­po­nen­ten, die bei der Erstel­lung von Wire­frames zum Bei­spiel oft als Web­site-Ele­men­te bezeich­net werden. 

4. Vorlagen (Templates)

In der Tem­p­la­te-Phase wird die Che­mie-Ana­lo­gie auf­ge­löst, um zu einer Spra­che zu gelan­gen, die für die Kun­den und das End­ergeb­nis mehr Sinn ergibt. Vor­la­gen bzw. Tem­pla­tes bestehen meist aus Grup­pen von Orga­nis­men, die zu Sei­ten zusam­men­ge­fügt werden. Dabei sieht man, wie das Design zusam­men­kommt und das Lay­out in Akti­on. Tem­pla­tes sind bereits sehr kon­kret und bie­ten einen Kon­text für die bis­her rela­tiv abs­trak­ten Mole­kü­le und Orga­nis­men. Anhand von Tem­pla­tes sehen die Kun­den auch die end­gül­ti­ge Designstruktur. 

5. Seiten

Sei­ten sind spe­zi­el­le Aus­prä­gun­gen von Tem­pla­tes. Hier werden Platz­hal­ter­in­hal­te durch echte, reprä­sen­ta­ti­ve Inhal­te ersetzt, um ein genau­es Bild des­sen zu ver­mit­teln, was ein Benut­zer letzt­end­lich sehen wird.

Die Sei­ten kom­men dem End­ergeb­nis am nächs­ten und sie sind von ent­schei­den­der Bedeu­tung, da bei die­ser Stufe die Wirk­sam­keit des Ent­wurfs­sys­tems getes­tet wird. Mole­kü­le, Orga­nis­men und Vor­la­gen kön­nen dabei so ver­än­dert werden, dass sie dem tat­säch­li­chen Kon­text des Designs bes­ser ent­spre­chen. Sei­ten werden auch genutzt, um Varia­tio­nen von Vor­la­gen zu tes­ten. Sie zei­gen zum Bei­spiel wie eine Über­schrift mit 40 Zei­chen aus­sieht, aber auch, wie 340 Zei­chen aus­se­hen. Wie sieht es aus, wenn ein Benut­zer einen Arti­kel in sei­nem Ein­kaufs­wa­gen hat, im Gegen­satz zu 10 Arti­keln, auf die ein Rabatt­code ange­wen­det wurde? Auch hier beein­flus­sen diese spe­zi­fi­schen Fälle die Art und Weise, wie das Sys­tem durch­lau­fen und kon­stru­iert wird.

Vorteile von Atomic Design

Frü­her muss­ten Web-Ent­wick­ler Web­sei­ten auf Grund­la­ge von fer­ti­gen Designs pro­gram­mie­ren, indem sie sich die fer­ti­ge Seite in klei­ne, sich wie­der­ho­len­de Ele­men­te ein­ge­teilt haben. Ato­mic Design funk­tio­niert genau anders­rum. Die Idee ist, die Seite anhand der kleins­ten Ele­men­te zu kon­stru­ie­ren. Durch diese Metho­de erschafft man ein kon­sis­ten­tes und ein­fach erwei­ter­ba­res Design. Ver­schie­de­ne Orga­nis­men von unter­schied­li­chen Tem­pla­tes kön­nen in ein neues Tem­p­la­te zusam­men­ge­fasst oder in ein bestehen­des ein­ge­baut werden, ohne ande­re Ele­men­te des Tem­pla­tes zu beein­flus­sen. Durch das Zurück­grei­fen auf bestehen­de Atome (z.B. But­tons) spart man viel Zeit und muss nicht immer wie­der von neu anfan­gen. Außer­dem trägt Ato­mic Design dazu bei, dass Pro­gram­mie­rer sich an nur einen Code-Auf­bau gewöh­nen müs­sen und so schnel­ler bei der Web-Umset­zung sind. Ins­be­son­de­re bei grö­ße­ren Web­sei­ten-Pro­jek­ten ist die Arbeit mit Design­sys­te­men also unbe­dingt zu emp­feh­len. Eines der Pro­jek­te von Lichtblick, bei dem wir Ato­mic Design ange­wandt haben, war der Web­site-Relaunch von Gar­ten­mö­bel­her­stel­ler Gude­wer. Hier geht’s zum Projekt. 

Quel­len:

• https://bradfrost.com/blog/post/atomic-web-design
• https://www.massiveart.com/de-de/blog/meine-erfahrung-mit-atomic-design-und-warum-du-damit-arbeiten-solltest