Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
Menü
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Login
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Menü
  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Agentur eintragen →
Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte
      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

Agentur eintragen →
Dr. Web » Boilerplates & andere Tools » Atomic Design: So gestaltest du deine Website modular

Atomic Design: So gestaltest du deine Website modular

Sozial sein
Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email
  • Ein Kommentar
Lesedauer: 5 Minuten
  • von Dieter Petereit
  • 26. April 2018
Bookmarke mich
Share on pocket

Begrifflichkeiten im Webdesign sind häufig nicht viel mehr als Worthülsen. Der Begriff „Atomic Design” darf zu diesen Hülsen gezählt werden. Denn er dient nur seinem Erfinder dazu, seine Philosophie unter einprägsamem Namen verbreiten zu können. Dennoch lohnt es, sich mit den Inhalten auseinander zu setzen.

Atomic Design: Das steckt dahinter

Der Begriff „Atomic Design“ geistert seit fast einem halben Jahrzehnt durch das Weltennetz. Erfunden von Brad Frost und inzwischen auch mit einem kompletten, online lesbaren Buch hinterlegt, lässt indes der Siegeszug auf sich warten. 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 richtigen Adresse. Ich stelle den theoretischen Ansatz in aller Kürze dar, damit wir wissen, wovon eigentlich die Rede ist. Interessiert dich das Konzept am Ende in der Tiefe, nutze die weiter oben gesetzten Links zu Brads Websites, insbesondere zum E-Book.

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

„Atomic Design“ ist wörtlich gemeint. Es geht vom Atom als kleinstem Bestandteil eines Designs aus. Ein Atom ist beispielsweise ein HTML-Tag oder ein Font oder eine andere, nicht weiter verkleinerbare Einheit im Design-System. Ein Molekül ist dann ein Konglomerat mehrerer Atome, die gemeinsam (als Molekül) eine Aufgabe lösen. Das könnte zum Beispiel ein vollständiges HTML-Formular sein. Die nächstgrößere Einheit bezeichnet Frost als Organismus. In einer solchen Einheit spielen mehrere Moleküle zusammen eine zielgerichtete Rolle. Ein Organismus könnte beispielsweise ein kompletter Seitenheader oder -footer oder der Bereich mit aktuellen News sein. Ich denke, du kannst dir vorstellen, was gemeint ist.

Ab diesem Punkt verlässt Frost die Analogie zur Sprache der Chemie. Nach dem Organismus kommt das Template, die Vorstufe der eigentlichen Pages. Letztere sind die dem Besucher schlussendlich zugänglichen Seiten mit allen aktiven Inhalten, während die Templates die Vorlagen sind, in die eben jene Inhalte später einfließen sollen.

Das war es im Grunde auch schon.

Atomic Design: Neu ist nur der Begriff

Nanu, mag sich der eine oder andere gestandene Webentwickler nun sagen, das habe ich doch noch nie anders gemacht. Allerdings wäre ich nicht auf die Idee gekommen, derlei Begrifflichkeiten zu verwenden. Wenn du ebenfalls so denkst, willkommen. Das ist auch mein Verständnis dieser Sache.

Es klingt natürlich prima und pseudowissenschaftlich, wenn wir von Atomen, Molekülen und so weiter reden. Einen echten eigenständigen Nutzwert hat das indes nicht. Vielmehr ist es ja lediglich logisch, dass wir Seiten auf der Basis von Templates, die wir mit verschiedenen Funktions- und Layoutblöcken gefüllt haben, bauen. Ob ich das dann Atome, Moleküle oder ganz anders nenne, spielt letztlich keine Rolle.

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

Insofern darf man mit einiger Berechtigung sagen, dass „Atomic Design“ nur alter Wein in neuen Schläuchen ist. Und an dieser Stelle klärt sich auch die Frage, ob „Atomic Design“ nun den Siegeszug angetreten hat oder nicht: Das hat es, allerdings nicht notwendigerweise unter dieser Bezeichnung. **

Einen Vorteil der Verwendung der Begrifflichkeit an sich kann ich durchaus erkennen, dieser ist aber mehr psychologischer Natur. Dadurch, dass wir von „Atomic Design“ sprechen, schaffen wir ein Bewusstsein, ein Mindset, das direkt in die richtige Richtung weist. Wir erreichen, dass wir uns bewusst auf die Kleinteiligkeit des Designansatzes fokussieren und nicht gleichsam zufällig richtig gestalten.

Dabei dürfte es wohl unstrittig sein, dass ein Designansatz generell immer vom kleinsten zum größten Teil ablaufen sollte. Nicht zuletzt das responsive Design zwingt uns fast schon zu dieser Vorgehensweise. Doch ob freiwillig oder nicht, für den Ansatz gibt es durchaus handfeste Gründe.

Argumente für ein Design im Baukastensystem

Obwohl Häuser durchaus unterschiedlich aussehen können, hat man sich in der Bauwirtschaft auf ein gemeinsames modulares System geeinigt, nachdem im Prinzip jedes Haus in gleicher Weise gebaut wird. Decken-, Wand- und Dachelemente werden zugeliefert und verbaut. Ebenso verhält es sich mit Fenstern, Türen und so weiter. Individuell ist letztlich nur die Zahl der verbauten Elemente sowie deren Optik.

In gleicher Weise verhält es sich in unserer Branche. Auch wenn du behaupten magst, du bautest jede Seite individuell nach den Vorgaben und Sinnhaftigkeiten, die der jeweilige Kunde macht beziehungsweise impliziert, so ist die Wahrheit doch die, dass jeder von uns über Jahre gepflegte und verbesserte Snippets für die unterschiedlichsten Funktionalitäten gebunkert hat und immer wieder gerne einsetzt. Das ist nicht etwa eine Schande, sondern ein Gebot der Vernunft, nicht zuletzt unter wirtschaftlichen Aspekten.

Wireframing als Konzeptionsmethode. (Foto: Depositphotos)

Das fängt schon beim Wireframing an. Das Wireframing ist eine Konzeptionsweise, die den Ansatz des „Atomic Design“ bildlich erfahrbar macht. In groben Inhaltsblöcken skizzieren wir, wie die Seite strukturiert werden und welche Funktionalität wo zu erwarten sein soll. So können wir ein Projekt von unten nach oben durchdenken, ohne uns bereits in den Details der Gestaltung zu verlieren.

Wir könnten also sagen, dass „Atomic Design“ dabei hilft, den Überblick zu bewahren. Und natürlich hilft der andere gedankliche Ansatz schon vom Start weg dabei, Code-Blöcke zu erstellen, die gut wiederverwendbar sind. Ohne den Ansatz könntest du durchaus weniger fokussiert auf diesen Punkt sein.

Fassen wir die Vorteile des Denkansatzes, nenn ihn „Atomic Design” oder nicht, kurz zusammen, kommt dabei eine schöne Liste mit einigem Nutzwert zusammen:

Du hast einen Fundus an beliebig zusammensteckbaren Modulen

Wenn du dich tatsächlich streng an den Ansatz hältst, hast du ein Arsenal fertiger Funktionsmodule an der Hand, die du beliebig zusammenstöpseln kannst. Innerhalb der gegebenen Hierarchie bist du frei im Einsatz und stellst auf diese Weise schnell mindestens Prototypen her.

Dein Style Guide entsteht quasi automatisch

Da du auf atomarer Ebene gestaltest, kannst du die Einzelteile direkt als Style Guide verwenden. Oder, noch anders ausgedrückt, du benötigst gar keinen solchen mehr, denn die Verwendung der Kleinteile sorgt automatisch für ein konsistentes Design.

Auch die Code-Basis ist zwangsläufig konsistent, was zum einfacheren Verständnis der Funktionsmodule beiträgt.

Dein Gestaltungsanspruch bleibt praktischer

Wenn du frei gestalten kannst, neigst du dazu, seitenbasiert zu layouten. Das ist ganz normal und entspricht alten Gewohnheiten. Gestaltest du atomar, geht es mehr darum, ein funktionierendes Design zu erstellen, das mit den gegebenen Bausteinen ordentlich aussieht. Durch die Kleinteiligkeit der Herangehensweise ist „mobile first” quasi der native Denkansatz.

Logisch, dass auch das Prototyping, wenn du es denn überhaupt noch so verstanden wissen willst, sich beschleunigt. Deine ersten Vorschläge liegen weitaus schneller vor.

So stark unterscheiden sich Atomic Design und der Bau eines Hauses nicht. (Foto: Depositphotos)

Deine Website bleibt leichter pflegbar

Wenn du konsequent mit der Hierarchie des „Atomic Design” arbeitest, ist es dir ein leichtes, Blöcke zu entnehmen, zu ersetzen, umzustellen. Dadurch ist die aktive Pflege deiner Website nicht unbedingt so einfach wie das Legen einer Patience, aber doch ähnlich strukturiert.

Der Ansatz lässt sich ausweiten

Hast du den Atomic-Ansatz erst einmal verinnerlicht, wird dir auffallen, dass nicht nur dein HTML-Markup profitieren kann. Auch mit CSS, JavaScript und anderen Technologien kannst du so verfahren. Gerade JavaScript bietet da Potenzial.

Fazit: Atomic Design an sich ist eine gute Sache

Du siehst, „Atomic Design” ist eine gute Sache. Ob du kleinteiliges Gestalten nun so bezeichnen willst oder nicht, bleibt dir überlassen. Möchtest du ein bisschen mit Brads Ansatz experimentieren, dann schau mal beim Pattern Lab vorbei. Hier kannst du dich mit dem Denkmodell vertraut machen. Kennst du Bootstrap, wird dich das nicht übermäßig anstrengen.

Auch spannend

  • Webdesign Trends 2022
  • Der goldene Schnitt
  • Brutalismus im Webdesign
  • Neumorphisches Design
  • Mehr Webdesign-Kunden finden
  • Responsive Design mit Flexbox oder Grid?

(Bildnachweis: Das Artikelbild ist eine Komposition aus dieser Illustration eines Atoms und diesem Bild. Das Material stammt von Depositphotos.)

Wie hilfreich war dieser Beitrag?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 0 / 5. Anzahl Bewertungen: 0

Dieter Petereit

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 Technik-affine Medien wie T3N und Dr. Web. Dieter war acht Jahre lang Chefredakteur des Dr. Web Magazins.

Agenturpartner

Warscher – Digital Experts

Horgen

design andrea becker

Frankfurt am Main

Online Solutions Group

München

Chris Hortsch Webdesign

Berlin

SEOfolgreich – Local SEO Agentur München

München

Alle Agenturpartner

Jobs

Senior Online Marketing Manager und stv. Geschäftsführer

Innsbruck

Copywriter – Vollzeit

Remote

Webtexter für SEO Agentur

Salzburg (Österreich)

Cloud Engineer Container & Kubernetes

Karlsruhe

Webdesigner – Vollzeit

Remote

Zum richtigen Job

Newsletter

Tipps, Tricks, Ratgeber. Unser Newsletter: Jeden Dienstag frisch gedruckt in Deinem Mail-Postfach.

Lust auf mehr? Wir empfehlen folgende Artikel:

Designpreis Focus Open 2022

So ein Designpreis ist eine feine Sache, wenn man ihn auch gewinnt. Insbesondere Werbeagenturen können und wollen auf ihrer Website mit solch einem Preis werben.

 →   

7 Beispiele für gutes Responsive Webdesign (Showcase)

Responsives Webdesign ist bereits seit längerer Zeit in aller Entwickler Munde. Eine responsive Website gilt sozusagen als die eierlegende Wollmilchsau, denn sie funktioniert auf jedem Ausgabegerät und mit jeder denkbaren Bildschirmauflösung. Egal, ob du eine Website auf einem Smartphone, einem Tablet oder einem Desktop-Rechner anschaust, überall wird der Inhalt optimal lesbar dargestellt.

 →   

„CSS gerootet“: Flexible Schriftgrößen mit REM

Diskussionen über die beste Art und Weise, die Schriftgröße bzw. den Schriftgrad zu definieren sind wahrscheinlich so alt wie das Web. Neben den traditionellen Kandidaten

 →   

Eine Antwort zu „Atomic Design: So gestaltest du deine Website modular“
— was ist Deine Meinung?

  1. Dorothee sagt:
    22. Mai 2018 um 10:36 Uhr

    Pattern Lab ist wirklich eines der besten Tools, wenn man mit Bootstrap arbeiten will, kann ich auch nur empfehlen. Aber es eignet sich sogar für Konzeptentwicklung, wenn man mit der Vorgabe arbeitet, dass die Seite mit Bootstrap umgesetzt werden soll. Dann haben Konzepter, Designer und Programmierer einen gemeinsamen Rahmen, und können sich aus der „Bibliothek“ bedienen.

    Antworten

Schreibe einen Kommentar Antworten abbrechen

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

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email

Wissen finden

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
Menü
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑
Menü
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑

Für Agenturen & Unternehmer

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Menü
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Das große Dr. Web Icon-Set: 970+ Icons, im SVG-Format​

Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Über 970 Dr. Web-Icons, kostenlos.
Danke nein, ist nichts für mich.
Invalid email address
Vielen Dank! Bitte schau noch in Dein Postfach und bestätige die Anmeldung.