Meine Erfahrung mit Atomic Design – und warum du damit arbeiten solltest
«We’re not designing pages, we’re designing systems of components.» – Stephen Hay
Atomic Design ist keine spezielle Darstellungsform – wie Flat Design – sondern eine Methode, um Design Systeme zu erstellen. Kurz: Es vereinfacht unser Entwickler-Leben enorm.
1. Was Atomic Design mit Chemie zu tun hat
Und damit begeben wir uns auf eine kurze Zeitreise zurück auf die Schulbank. Im Chemieunterricht haben wir gelernt, dass sich jegliche Materie aus Molekülen zusammensetzt – diese bestehen wiederum aus Atomen. Und genauso wie in der Chemie werden zunächst auch Webprojekte in ihre kleinsten Bausteine zerlegt, um sie anschließend in komplexen Einheiten zu kombinieren. Der Name “Atomic Design” entstand also nicht willkürlich, sondern spiegelt genau dieses Prinzip wieder. Den Gestaltungsansatz legte der amerikanische Webdesigner Brad Frost fest.
2. Aufbau im Webdesign: Ein Prozess in 5 Stufen
Auf das Webdesign angewandt unterscheiden wir fünf Stufen:
- Atome
- Moleküle
- Organismen
- Vorlagen (Templates)
- Seiten
Wenn wir uns eine Webseite ansehen, fällt uns meist nur die 5. Stufe auf. Wir sehen die gesamte Seite als ein ganzes Element. Erst wenn man zu Klicken beginnt und sich auf den Detailseiten aufhält fällt einem auf, dass sich gewisse Elemente wiederholen. Ein gutes Beispiel hierfür ist die Navigation im Header oder der Footer mit Kontaktdaten. Also die globalen Bereiche einer Website, die auf jeder Seite sichtbar sind und überall benötigt werden. Diese Elemente sind typische Organismen (Stufe 3).
Wie ihr wohl bemerkt habt, haben wir Stufe 4 übersprungen. Das liegt daran, dass Templates für einen Besucher meist unsichtbar sind. Natürlich bemerkt man, dass es mehrere Seiten gibt, die strukturell gleich aufgebaut sind. Jedoch werden diese als Seiten wahrgenommen und nicht als Templates – man sieht die einzelne Webseite und nicht die Vorlage.
Doch was für den Endbenutzer irrelevant ist, ist für den Administrator umso wichtiger. So kann eine Webseite aus unterschiedlichen Templates bestehen – zum Beispiel für die Startseite, die News und Events sowie für den Blog. Jede Seite wird mit eigenem Inhalt befüllt und unterschiedlich dargestellt.
Beispiel: Suchfeld
Ein typisches Beispiel für ein Molekül (Stufe 2) ist die Navigation im Header oder das Suchfeld. Beide werden jeweils aus mehreren Atomen aufgebaut. Für das Suchfeld sind es zum Beispiel folgende Atome (Stufe 1):
- Das Label: Suche
- Das Eingabefeld: Suchbegriff eingeben
- Der Button: Jetzt suchen
Wer sich mehr mit dem Thema außeinander setzen will, findet auf dem Blog von Brad Frost weitere detailierte Informationen – oder in folgendem Video.
Video: Brad Frost über Atomic Design (auf der Konferenz beyond tellerrand 2013)
3. Warum du mit Atomic Design arbeiten solltest
Die übliche Vorgehensweise besteht darin, dass ich als Programmierer die fertige Seite erhalte und diese in kleine, sich wiederholenden Elemente aufteile.
Beim Atomic Design ist es ein komplett anderer Ansatz. Es geht nicht darum, ein fertiges Produkt in seine Einzelteile zu zerlegen, sondern um die Konstruktion der fertigen Seite anhand der kleinsten Elemente. Durch diese Arbeitsweise baut man sich eine konsistente und erweiterbare Webseite auf. Das Endergebnis mag zwar dasselbe sein, doch die Vorgehensweise hat bedeutende Vorteile:
4. Deine Vorteile zusammengefasst:
- Erweiterbar: Neue Templates können mit bestehenden Bausteinen konstruiert werden. Ich kann verschiedene Organismen von unterschiedlichen Templates in ein neues Template zusammenfassen oder neue Organismen erstellen und diese in bestehende Templates einbauen, ohne andere Elemente des Templates zu beeinflussen.
- Konsistent: Das Rad muss nicht immer neu erfunden werden. Wenn ein neues Template benötigt wird, greift man auf bestehende Atome (zum Beispiel Button) und muss diesen nicht neu gestalten oder programmieren. Somit kennt sich auch der Endnutzer aus und weiß, dass ein Button der eine bestimmte Farbe hat, die gleiche Funktion aufweißt wie auf einer anderen Seite.
- Zusammenarbeit: Für Programmierer ist es eine große Herausforderung, den Code eines anderen zu verstehen. Denn jeder Programmierer hat seine eigene Schreibweise und das ist auch gut so. Atomic Design kann aber dazu beitragen, den Codeaufbau schneller zu verstehen.
5. Und darauf solltest du achten
Atomic Design ist ein Prozess, der sowohl den Entwickler als auch den Web Designer betrifft. Ist das Design nicht konsistent strukturiert aufgebaut, erhöht sich der Aufwand enorm. Für dich als Programmierer dürfte das nichts Neues sein.
Und für alle anderen ein Beispiel. Betrachtet man die Glaskuppel in Abbildung 1, wird deutlich: Wären die Dreiecke nicht einheitlich, wäre der Aufwand enorm. Das Dreieck wurde nur einmal definiert und dann wiederholt verwendet. Für das Web heißt das übersetzt: Kann ein Element dupliziert werden, verringert sich der Aufwand für den Entwickler – und Atomic Design kann angewendet werden.
Abbildung 1: Glaskuppel
(Bildquelle: Mika Ruusunen // unsplash.com)
Praxis
Genug der Theorie. Wie sieht das ganze in der Praxis aus und worauf muss ich bei der Umsetzung achten? Nehmen wir wieder das Suchfeld als Beispiel. Das Ziel ist es, die einzelnen Elemente stabil aufzubauen. Unabhängig vom Container arbeiten wir uns also von innen nach außen.
Wir arbeiten mit folgendem HTML-Aufbau:
<div class="search-container">
<label>Search the site</label>
<input type="text" placeholder="ENTER KEYWORD"/>
<a class="btn" href="/">search</a>
</div>
Der Nicht-Atomic-Design-Weg wäre zum Beispiel folgender:
.search-container label {
text-transform: uppercase;
color: black;
...
}
.search-container input {
background: black;
padding: 10px;
...
}
.search-container a {
padding: 10px;
background: orange;
color: white;
...
}
Der Atomic-Design-Ansatz:
label {
text-transform: uppercase;
color: black;
}
input {
background: black;
padding: 10px;
...
}
.btn {
padding: 10px;
background: orange;
color: white;
...
}Und das ist der Unterschied zwischen den beiden Versionen:
- Mit Atomic Design: Man arbeitet von innen nach außen (vom kleinen ins große).
- Ohne Atomic Design: Man arbeitet von außen nach innen.
- Fazit: Das Endresultat bleibt dasselbe, der Unterschied liegt in der Erweiterbarkeit.
Dadurch, dass ich zum Beispiel die Klasse btn definiere, kann ich diesen Button an jeder beliebigen Stelle nur mit der Klasse darstellen – während ich dazu bei Methode 1 (ohne Atomic Design) den Container benötige.
Einige arbeiten vermutlich schon unbewusst so oder verwenden eine Mischform. Wichtig ist aber die konsequente Durchführung der Methode. Werden zum Beispiel Buttons überall orange dargestellt und nur im Header grün, so gehe ich folgendermaßen vor:
<div class="header">
<a class="btn btn-alt">Button</a>
</div>
.btn {
background: orange;
}
.btn-alt {
background: green;
}und nicht so:
<div class="header">
<a class="btn">Button</a>
</div>
.btn {
background: orange;
}
.header .btn {
background: green;
}Damit ist der Button unabhängig vom übergeordneten Element. Die Farbe kann alleine durch die Klasse geändert werden und die Positionierung des Buttons ist an unterschiedlichen Stellen möglich.
Aber aufgepasst!
Wie jedes System hat auch Atomic Design seine Nachteile. Für kleinere Projekte ist der Aufbau aufwändiger. Der Mehraufwand wird aber durch die bessere Erweiterbarkeit belohnt.
