Kontakt

Was ist Atomic Design?

Welches Problem löst es?

“Atomic design is a methodology for creating design systems. There are five distinct levels in atomic design:
1. Atoms 2. Molecules 3. Organism 4. Templates 5. Pages“

Über den Atomic Design-Ansatz wird eine solide Modularisierung von Komponenten sichergestellt, die einer festen sowie test- und erfahrbaren Systematik folgt. Sie ist darauf ausgelegt ein Frontend / Interface als dynamisch und organisch wachsende Struktur zu verstehen.

Wieso benötige ich eine Methodologie? Wie hilft sie bei der Modularisierung?

Weniger wichtig als die am Ende konkret gewählte Methodologie zur Modularisierung, ist die Tatsache für sich und sein Team eine konsistente Strategie für die Strukturierung zunehmend komplexer Frontend-Komponenten zu finden. Es braucht einen Weg um zwischen erst einmal beliebig unterschiedlich scheinenden Komponenten, vom einfachen Button bis hin zum komplexen Header, Grenzen zu ziehen. Erst diese Abgrenzungen ermöglichen das Aufteilen, die Komposition und Unterscheidung von Komponeten, welche notwendig sind um ein möglichst kohärentes, zusammenhängendes Frontend zu entwickeln.

In komplexer werdenden Interfaces wird es zur Voraussetzung sich auf eine solche Methodologie festzulegen. Eine gemeinsame Sprache mit allen Beteiligten zu sprechen, ein gemeinsames mentales Modell zu haben, wenn man so will! Nur so kann den Herausforderungen an organisch wachsende Frontends effizient begegnet werden.

Wieso gerade Atomic Design?

Wie bereits angedeutet sollte jedem etwas komplexeren Frontend eine Methodologie zur Modularisierung zu Grunde liegen.

Dieses kann eine für sich selbst, oder mit dem Team zusammen, gefundene Methodologie sein. Es macht aber viel Sinn sich an bereits vorhandenen Best Practices, und entsprechend getesteter und adaptierbarer Konventionen, zu orientieren. Dies vereinfacht die Zugänglichkeit für neue Entwickler, und nimmt dem Team die Herleitung und aufwändige Dokumentation eigener Abläufe ab.

Atomic Design, wie durch Brad Frost mit Erscheinen des erste Blogposts im Juni 2013 etabliert, hat sich seitdem schnell als grundsätzliche Methodologie zum Nachdenken über Komponenten-Strukturen und -Zusammenhänge etabliert. Ein ganzes Ökosystem, mit entsprechendem Tooling wie dem Pattern Lab, hat sich auf dieser Grundlage entwickelt.

Die schnell verständliche Analogie zur Biologie, und wie dort aus immer kleineren Teilen große Organismen erwachsen, vereinfacht als bekanntes Gedanken-Modell den Zugang zu sonst erstmal abstrakten Kategorien. Zusätzlich muss die konkrete Wahl der Kategorien nicht selbst gefunden werden; eine der gefühlt großen Herausforderungen, die am Ende aber gar nicht den größten Unterschied macht. Das Unterteilen und Abstrahieren an sich sind das Entscheidende!

Vom abstrakten Konzept hin zu konkreten Ergebnissen

Atomic Design, aber auch jede andere Modularisierung, ist erstmal nur ein abstraktes Konzept. Um dieses in die Realität zu übersetzen benötigt es, neben Tooling (wie z.B. dem bereits angedeuteten Pattern Lab), vor allem einen Weg die gefundenen Abstraktionen (Kategorien; Atome, Organismen, etc) konkret in verwendbaren Code zu implementieren.

Dabei ist es zuerst wichtig saubere Strukturen im Markup von Komponenten zu etablieren, um im zweiten Schritt dann anhand einer dazu passenden CSS-Strategie das gewünschte Design systematisch in diese zu integrieren. Komponenten werden in der Folge auch als die Kombination aller zur Darstellung notwendigen Teile - HTML, CSS und JavaScript - gedacht; wir nennen diese auch HTML Komponenten.

Eine solche CSS-Strategie, und die unserer Wahl, ist Block Element Modifier; kurz BEM:

BEM — Block Element Modifier is a methodology that helps you to create reusable components and code sharing in front-end development

Anknüpfende Themen

Pattern Lab bei ruhmesmeile

Pattern Lab

Wie setzen wir das Pattern Lab als Entwicklungs-Tool als Hilfe zur Integration in verschiedene Backends, und zur Unterstützung von Kunden-Kommunikation und Abstimmungsprozessen ein!

BEM - Block Element Modifier

BEM

Was ist BEM? Wieso eignet es sich im Zusammenspiel mit SASS hervorragend als CSS-Systematik zur Umsetzung von Atomic Designs?

Unser Entwicklungsansatz

Wie setzen wir bei ruhmesmeile diese ganzen Bausteine zu einem effizienten Entwicklungsansatz zusammen; die Vogelperspektive.