Du willst die Farbe deiner Buttons ändern. Eine Kleinigkeit, denkst du. Dann kommt die Rechnung, und auf ihr stehen mehrere Stunden. Der Grund liegt meistens im Aufbau der Website: Jeder Button wurde einzeln gestaltet, auf jeder Seite neu. Atomic Design ist eine Methode, die genau das verhindert. Die Website wird aus Bausteinen gebaut, und jeder Baustein existiert nur einmal. Wie das funktioniert und was du davon hast, erkläre ich hier ohne Fachbegriffe. Am Ende gibt es eine Checkliste zum Abhaken.
Was ist Atomic Design?
Atomic Design ist eine Methode, bei der eine Website aus kleinen, wiederverwendbaren Bausteinen aufgebaut wird. Kleine Teile werden zu größeren zusammengesetzt, bis die fertige Seite entsteht. Jeder Baustein wird einmal gestaltet und dann überall verwendet, wo er gebraucht wird.
Die Methode stammt von Brad Frost, einem US-amerikanischen Webdesigner. Er hat sie im Juni 2013 auf seinem Blog vorgestellt. 2016 folgte das Buch Atomic Design, das du online kostenlos lesen kannst.
Der Name kommt aus der Chemie. Dort verbinden sich Atome zu Molekülen, und aus Molekülen entsteht alles andere. Frost hat dieses Bild auf Websites übertragen. Laut Frost ist das keine feste Reihenfolge, sondern eine Denkweise: Beim Bauen hat man den kleinen Button und die fertige Seite gleichzeitig im Blick.
Die fünf Stufen am Beispiel Kontaktformular
Am leichtesten verstehst du die Methode an etwas, das fast jede Website hat: dem Kontaktformular.
- Atome: Die kleinsten Teile, die sich nicht weiter zerlegen lassen. Ein Eingabefeld oder ein Button. Auch Farben und Schriften gehören dazu.
- Moleküle: Ein paar Atome, die zusammen eine Aufgabe erfüllen. Zum Beispiel ein Formularfeld aus Beschriftung und Eingabefeld.
- Organismen: Größere Abschnitte einer Seite. Das ganze Kontaktformular ist einer, die Kopfzeile mit Logo und Menü ein anderer.
- Vorlagen: Der Aufbau einer Seite, noch ohne echte Inhalte. Hier wird festgelegt, wo das Formular steht und wo Text und Bild hinkommen.
- Seiten: Die Vorlage mit echtem Inhalt. Also deine Kontaktseite mit deinem Text und deiner Adresse.
Wichtig ist, wie die Stufen zusammenhängen. Das Eingabefeld steckt im Formularfeld. Das Formularfeld steckt im Kontaktformular, und so weiter bis zur Seite. Änderst du das Eingabefeld, ändert es sich überall mit. Auf der Kontaktseite genauso wie im Newsletter-Formular.
Was dir Atomic Design bringt
Du musst die Methode nicht selbst anwenden. Das macht die Person oder Agentur, die deine Website baut. Aber du merkst den Unterschied, sobald du etwas ändern willst.
- Änderungen kosten weniger. Eine neue Button-Farbe oder eine andere Schrift: Das passiert an einer Stelle statt an vierzig. Das spart Arbeitszeit, die du sonst bezahlst.
- Neue Seiten sind schneller fertig. Die Teile gibt es schon. Eine neue Leistungsseite wird aus vorhandenen Bausteinen zusammengestellt und nicht neu gestaltet.
- Die Website sieht überall gleich aus. Gleiche Dinge sehen gleich aus und funktionieren gleich. Das hilft deinen Besuchern, sich zurechtzufinden. Besucher erwarten das, mehr dazu im Beitrag zu Jakob’s Law.
- Ein anderer Entwickler kann übernehmen. Wenn die Bausteine sauber angelegt sind, findet sich jeder WordPress-Entwickler schnell zurecht. Du bist nicht von einer Person abhängig.
Was die Studien sagen
Dass Bausteine Zeit sparen, klingt logisch. Es gibt dazu auch Messungen, allerdings nur kleine. Die US-Agentur Sparkbox hat einen Versuch mit acht Entwicklern gemacht. Jeder hat dasselbe Kontaktformular zweimal gebaut. Einmal von Grund auf, einmal mit Carbon, dem fertigen Baukasten von IBM. Laut Sparkbox ging es mit dem Baukasten um 47 % schneller. Die Hälfte der Entwickler war in höchstens 2 Stunden fertig. Ohne Baukasten lag dieser Wert bei 4,2 Stunden. Und das, obwohl keiner Carbon vorher kannte. Die Einarbeitung war in der Zeit schon drin.
Auch beim Aussehen gab es einen Unterschied. Bei fünf von acht Entwicklern sah das Formular mit Baukasten einheitlicher aus als ohne. Figma, der Hersteller eines bekannten Design-Programms, hat einen ähnlichen Versuch mit Designern gemacht. Mit fertigen Bausteinen waren sie 34 % schneller. Wie viele Designer mitgemacht haben, nennt Figma nicht. Dazu kommt: Figma verkauft solche Werkzeuge, und Sparkbox baut selbst Design-Systeme für Kunden. Nimm beide Zahlen deshalb als Richtung und nicht als Versprechen.
Barrierefreiheit: einmal richtig, überall richtig
Für die Barrierefreiheit ist das besonders wichtig. Viele Anforderungen an eine barrierefreie Website stecken in den kleinsten Teilen. Ein Button braucht einen sichtbaren Rahmen, wenn man ihn mit der Tastatur auswählt (Fokus-Rahmen). Mehr dazu im Beitrag zum sichtbaren Fokus. Ein Eingabefeld braucht eine Beschriftung, die auch ein Screenreader vorlesen kann. Das ist ein Programm, das blinden Menschen die Website vorliest. Text braucht genug Kontrast zum Hintergrund.
Ist das im Baustein richtig gelöst, stimmt es auf jeder Seite, wo der Baustein vorkommt. Wird der Baustein später verbessert, profitieren alle Seiten. Wie ein barrierefreies Formular im Detail aussieht, zeigt der Beitrag zu barrierefreien Formularen.
Das gilt aber auch umgekehrt. Ein Fehler im Baustein steht dann auch auf jeder Seite. Fehlt dem Button der Fokus-Rahmen, fehlt er auf allen 40 Seiten. Der Vorteil: Du behebst ihn an einer Stelle, und er ist überall weg.
Automatisch barrierefrei wird eine Website durch Bausteine nicht. Das hat auch der Sparkbox-Versuch gezeigt. Bei der Barrierefreiheit war das Formular mit Baukasten nicht klar besser. Bei zwei von acht Entwicklern war die selbst gebaute Version sogar besser. Ein Baukasten macht es leichter, die Prüfung ersetzt er nicht.
Manches lässt sich auch gar nicht in einem Baustein lösen. Ob die Überschriften in der richtigen Reihenfolge stehen, entscheidet sich auf der Seite. Auch ob ein Bild eine passende Bildbeschreibung (Alternativtext) hat, hängt vom einzelnen Bild ab. Das passiert alles auf der Stufe „Seite“, und dort muss es auch geprüft werden.
So sieht Atomic Design in WordPress aus
Den Begriff Atomic Design wirst du in WordPress kaum finden. WordPress bietet aber die Werkzeuge dafür. Ob sie genutzt werden, entscheidet, wer die Website baut. Gestaltet wird entweder mit dem eingebauten Block-Editor oder mit einem Zusatzprogramm, einem sogenannten Page-Builder. Ich arbeite meistens mit dem Page-Builder Bricks. Für Interessierte hier die Zuordnung:
| Stufe | In Bricks Builder | Im Block-Editor |
|---|---|---|
| Atome | Globale Farben und Schriften | Globale Stile des Themes |
| Moleküle und Organismen | Components, also wiederverwendbare Bausteine | Synchronisierte Vorlagen |
| Vorlagen | Templates | Templates des Themes |
| Seiten | Deine einzelnen Seiten | Deine einzelnen Seiten |
Das Gegenteil sind Seiten, bei denen jedes Element einzeln eingestellt wurde. Dann wurde zum Beispiel jeder Button einzeln eingefärbt, statt die Farbe einmal zentral festzulegen. Das geht mit jedem Page-Builder, mit Elementor genauso wie mit Bricks. Es fällt nur nicht auf, solange niemand etwas ändern will. Welcher Builder für dich passt, steht im Vergleich Bricks Builder vs. Elementor.
Du hast schon ein fertiges Design, zum Beispiel aus Figma? Dann lohnt es sich, die Bausteine beim Umsetzen gleich sauber anzulegen. Mehr dazu im Beitrag Design in WordPress umsetzen lassen.
Wann sich Atomic Design nicht lohnt
Bausteine sauber anzulegen kostet am Anfang etwas mehr Zeit. Das zahlt sich aus, wenn die Website länger lebt und wächst. Nicht immer ist das der Fall:
- Eine einzelne Aktionsseite, zum Beispiel für ein Gewinnspiel, die nach ein paar Wochen wieder offline geht.
- Eine Website, die ohnehin bald neu gebaut wird. Hier lohnt es sich nicht, das alte System umzubauen. Besser gleich beim Neubau der Website (Relaunch) richtig anfangen.
Für eine normale Firmen-Website mit ein paar Unterseiten lohnt es sich dagegen fast immer. Der Mehraufwand rechnet sich meist schon nach wenigen Änderungen.
Checkliste: Ist deine Website aus Bausteinen gebaut?
Hake ab, was auf deiner Website schon passt. Dein Stand bleibt in diesem Browser gespeichert.
- Gleiche Elemente sehen auf allen Seiten gleich aus. Öffne drei Unterseiten und vergleiche Buttons und Überschriften.
- Eine Farbänderung passiert an einer Stelle. Frag, wer deine Website betreut: An wie vielen Stellen muss man ran, wenn sich die Button-Farbe ändert?
- Farben und Schriften sind zentral hinterlegt. Frag, ob Farben und Schriften in den Grundeinstellungen der Website festgelegt sind.
- Formulare sind überall gleich aufgebaut. Vergleiche das Kontaktformular mit anderen Formularen auf der Seite.
- Neue Seiten entstehen aus fertigen Teilen. Kannst du oder jemand aus deinem Team eine neue Seite aus vorhandenen Abschnitten zusammenstellen?
- Es gibt eine Übersicht aller Bausteine. Gibt es eine Seite oder ein Dokument, auf dem alle Bausteine zu sehen sind (oft Styleguide genannt)?
- Die Bausteine sind barrierefrei geprüft. Drück mehrmals die Tab-Taste (links neben dem Q). Siehst du an jedem Button und Link einen Rahmen?
Häufige Fragen
Was ist Atomic Design einfach erklärt?
Atomic Design heißt, eine Website aus wiederverwendbaren Bausteinen zu bauen. Aus kleinen Teilen wie Buttons werden größere wie Formulare, daraus entstehen ganze Seiten. Jeder Baustein existiert nur einmal und wird überall verwendet.
Lohnt sich Atomic Design auch für eine kleine Firmen-Website?
Ja, meistens schon. Auch eine kleine Website hat Buttons und eine Kopfzeile auf jeder Seite. Nach wenigen Änderungen hast du den Mehraufwand meist wieder drin. Nur bei kurzlebigen Seiten wie einer einzelnen Aktionsseite lohnt es sich nicht.
Muss ich meine Website neu bauen lassen, um davon zu profitieren?
Nicht unbedingt. Oft lassen sich Farben und Schriften nachträglich zentral hinterlegen, und häufig verwendete Teile werden zu Bausteinen umgebaut. Ob sich das lohnt oder ein Neubau besser ist, hängt vom Zustand der Seite ab. Steht ohnehin ein Neubau an, fang dort gleich richtig an.
Wird meine Website durch Atomic Design automatisch barrierefrei?
Nein. Bausteine machen es leichter, weil eine Lösung überall wirkt. Ob die Bausteine selbst barrierefrei sind, muss trotzdem geprüft werden. Dazu kommt alles, was auf der einzelnen Seite entschieden wird, etwa Überschriften und Bildbeschreibungen.
Du planst eine neue Website oder ärgerst dich über teure Änderungen an der alten? Bei einem Neubau baue ich die Seite so auf, dass jeder WordPress-Entwickler sie übernehmen kann. Was das kostet, steht im Beitrag Was kostet eine WordPress-Website. Oder du schreibst mir direkt über die Kontaktseite.
