Atomic Design: Fünf Vorteile, die einen digitalen Entwicklungsprozess professionalisieren

Atomic Design ist eine Designmethode, die bereits seit 2013 besteht – entwickelt von Brad Frost. Um seinen Ansatz zu beschreiben, bedient er sich einer Analogie aus der Chemie: Das Entwickeln von Websites oder komplexeren UI-Systemen sollte auf den kleinstmöglichen Bausteinen beruhen – den Atomen (HTML-Tags, Fonts etc.). Diese einzelnen Elemente werden dann beliebig zu Molekülen wie HTML-Formularen und zu Organismen wie Seitenheader oder -footer zusammengefügt.

Auf den ersten Blick ist das nichts Weltbewegendes, denn diese Methode wird in der Software-Entwicklung bereits seit längerem verwendet – wenn auch nicht unter dieser Begrifflichkeit. Gerade für Gestalter:innen bedeutet es aber gerade in späteren Projektphasen oder bei Erweiterungen von Websites eine wesentliche Erleichterung ihres Arbeitsalltags, auch wenn zunächst vielleicht ein gewisser Mehraufwand entsteht.

Welche fünf konkreten Vorteile durch Atomic Design entstehen und wie sich diese auf den digitalen Entwicklungsprozess über alle Disziplinen hinweg auswirken, beschreibt Vanessa Murawski, Designerin bei der Digitalagentur dotfly:

Vorteil 1: Die Markenwelt vereinfachen

Kreative erstellen in der Regel Landingpages oder andere digitale Kommunikationsprodukte am aktuellen Bedarf und an konkreten Situationen ausgerichtet – meist bei null beginnend, jedes Mal neu. Markenkohärenz zu garantieren kann so eine große Herausforderung darstellen – oftmals sehen Brand-Auftritte über verschiedene Kanäle hinweg aus wie Kraut und Rüben.

Atomic Design bietet hier einen Ausweg und einen wesentlichen Vorteil: Die einzelnen, frei verwendbaren Bausteine und Vorlagen geben Designer:innen und den anderen Projektbeteiligten – etwa Programmierer:innen – alle Möglichkeiten und Elemente an die Hand, um die Markenwelt kanalübergreifend leicht und unkompliziert zu adaptieren und zu erweitern. Durch die vielfältigen Variationsmöglichkeiten der einzelnen, fest definierten Atome entsteht ein vielseitiges, dennoch klares und eindeutig wiedererkennbares Markenbild.

Vorteil 2: Mit einer Pattern Library schneller zum Projektziel  

Viele Agenturen arbeiten bereits mit Pattern Libraries, um den Projektverlauf zu optimieren. Dies hat nicht nur für die Experience-Designabteilung, sondern auch für Programmierer:innen einen klaren Vorteil: Die Library bietet eine übersichtliche Darstellung aller globalen Elemente. Das ist schon einmal eine wichtige Verbesserung und erzeugt im Prozess bereits eine massive Zeitersparnis.

Die Erweiterung der Pattern Library durch die einzelnen Atome und Moleküle zersetzt das Projekt in noch kleinere Teile und hilft dabei, ggf. einzelne Bausteine im Nachgang zu optimieren. In Kombination mit der Verwendung von Komponenten, wie es beispielsweise im Design-Kollaborationstool Figma möglich ist, wird in der Pattern Library ein Atom oder Molekül bearbeitet und die Änderung wird auch auf bereits angelegten Content-Seiten automatisch übernommen.

Eine Pattern Library wirkt aber auch noch an ganz anderer Stelle: Kund:innen und externe Projektteilnehmende können wesentlich einfacher und schneller mit den Elementen im eigenen Corporate Design arbeiten und diese anpassen – ähnlich wie ein üblicher Styleguide verbessert sie das Verständnis, die Anwendung und Adaption der Gestaltungsmittel.

Bei allen Vorteilen bleibt aber zu bedenken, dass das erstmalige Anlegen der Library aufgrund der ausführlichen konzeptionellen Vorarbeit und der Definition der Ziele den beteiligten Personen einiges an Ressourcen abverlangt. Der Lohn für die Mühe macht sich aber in der weiteren Arbeit mit den Elementen bemerkbar. Denn: In späteren Projekt-Phasen oder bei Überarbeitungen müssen Designer:innen nur noch in den bestehenden Dokumenten adaptieren – das System übernimmt diese Anpassungen dann automatisch und passt sie dokumentübergreifend an. Es entsteht also eine wesentliche Entlastung der Gestaltenden und der Programmierer:innen. Im besten Fall haben alle am Projekt Beteiligten dann mehr Zeit, um sich für ihre Kund:innen neue, innovative und coole Ideen zu überlegen, die sie glücklich machen – eine echte Win-Win-Situation.

Vorteil 3: Alle sprechen die gleiche Sprache

Um in umfangreichen (digitalen) Projekten erfolgreich zu sein, gilt es, für alle Beteiligten und Fachbereiche eine einheitliche Sprache zu entwickeln – von den Konzepter:innen über die Gestaltenden bis zu den Programmierenden. Durch eine fest definierte Terminologie stellen Projektteams sicher, dass nicht über alle Gewerke hinweg aneinander vorbeigeredet wird. Was vor allem dann immer wieder vorkommt, wenn eine Vielzahl von Elementen im Spiel ist. Eine klare und eindeutige Benennung dieser Elemente stellt sicher, dass alle involvierten Personen genau wissen, wovon ihre Partner sprechen. Es gilt vor allem sicherzustellen, dass die Beteiligten auf Agenturseite sowie die Kund:innen immer genau nachvollziehen können, worüber gerade kommuniziert wird, damit sie entsprechend handeln können – etwa bei der Website-Pflege.

Zusätzlich können so auch externe Personen besser und schneller in das Projekt integriert werden und direkt konstruktiv einsteigen – ohne sich groß eindenken zu müssen. Ein Beispiel: Ein:e Webentwickler:in, die bei einem Krankheitsfall im Team einspringt, kann ohne langwieriges Onboarding aufgrund der klaren Benennung relevante Code-Segmente und Design-Atome schnell identifizieren und anpassen. Oder: Neue Kolleg:innen im Team können sich ganz einfach in der klar aufgebauten und benannten Pattern Library zurechtfinden, wenn es darum geht, einzelne Atome automatisiert für Templates und Pages zu optimieren.

Vorteil 4: Mehr Verständnis füreinander entwickeln

Was für Programmierer:innen schon lange Gang und Gäbe ist, wird nun auch mit der Bedeutung von Mobile-First-Ansätzen im Bereich Screendesign immer wichtiger – das Denken vom Kleinen zum Großen, vom Speziellen zum Generellen. Oder anders ausgedrückt: Atomic Design ist zwar nicht neu, fasst aber in digitalen Umfeldern immer mehr Fuß.

Einer der wichtigsten Gründe hierfür: Atomic Design stärkt das Verständnis aller Projektbeteiligten für die jeweilige Aufgabenstellung ihrer Kolleg:innen – und verbessert so die Ergebnisse des gesamten Teams. Gleich, ob Projektmanager:in oder Kund:in, alle bekommen mit dieser Methodik klare Rahmen- und Handlungsbedingungen, können leichter verstehen, was die anderen tun, und können so besser auf sämtliche Anforderungen im Projekt eingehen. Alle Projektteilnehmenden merken schnell, dass der Atomic Design-Ansatz ermöglicht, Designsysteme methodischer und damit effizienter aufzubauen, was zu einer nachhaltigen Zeitersparnis über alle Gewerke hinweg führt.

Langfristig entsteht durch den Einsatz von Atomic Design auch eine neue Arbeitsweise: Was Programmierer:innen meist schon länger tun, nämlich im Projekt von innen nach außen zu arbeiten, übernehmen jetzt auch die Gestaltenden. Mit dem klaren Vorteil, dass es viel einfacher wird, Adaptionen vorzunehmen und digitale Kommunikationsprodukte flexibler und zukunftsfähiger zu machen.

Doch auch hier sollte man zu Beginn eines Projekts die grobe Idee für die digitale Kreation sowie das Konstrukt stehen haben – bevor man sich an die Ausarbeitung der einzelnen Atome, Moleküle und Organismen des Atomic Designs macht. Denn was gibt es Schlimmeres, als am Ende zu merken, dass das ganze Design nicht aus Nutzer:innensicht anwendbar ist.

Vorteil 5: Niemand muss auf Arbeit warten

Die Atomic Design-Methode bietet auch eine wesentliche Verbesserung über den gesamten Projektverlauf hinweg: So mussten etwa Programmierende bisher meist lange warten, bis sie mit ihrer Arbeit beginnen konnten. Als letztes Glied in der Kette klassischer Website-Relaunches oder anderer digitaler Kommunikationsprojekte waren diese Kolleg:innen in der Regel bis zur Finalisierung des kompletten Designs quasi arbeitslos.

Arbeiten Design-Teams aber von Anfang an ‚atomar‘, können die Techniker:innen loslegen, sobald die ersten Design-Elemente angelegt sind. Zudem können so wichtige Insights und Feedbacks seitens der Webentwicklung ins Design einfließen und so für eine zeitnahe Optimierung sorgen. Im Ergebnis arbeiten alle Fachbereiche entspannter und produktiver, da der sonst übliche Druck auf die letzte Meile eines Projekts deutlich reduziert wird – das freut nicht nur das Team, sondern auch die Kund:innen.

Diese fünf Verbesserungen im Design-Prozess sind gute Gründe für Gestaltende, sich das Konzept Atomic Design zumindest einmal etwas genauer anzusehen – wenn nicht sogar es in ihre Arbeit zu integrieren. Die gewonnen Erleichterungen und die Zeitersparnis im Projektmanagement-Prozess würden dazu schon ausreichen. Die Reduzierung von Missverständnissen in der Kommunikation zwischen den einzelnen Gewerken wie Strategie und Entwicklung sind dabei das I-Tüpfelchen auf der Sahnetorte – wer atomar denkt und arbeitet, agiert einfach professioneller und beeindruckt so auch die Kund:innen.