Was ist Atomic Design?
Wir versuchen bei MOFART unsere Projekte in einem strukturierten Prozess zu bearbeiten. So können wir sicherstellen, dass all unsere Kunden immer mit der gleichen Qualität rechnen können. Ein Baustein in unserem Prozess ist der Grundsatz der Atomic Designs. In diesem Beitrag möchte ich dir einen Einstieg in das Thema Atomic Design geben.
Was ist Atomic Design?
Das Prinzip von Atomic Design ist recht einfach zusammengefasst. Es bedient sich — wie der Name schon sagt — in der Chemie. Atome sind das kleinste Teilchen aus dem etwas bestehen kann. Mehrere Atome bilden dann ein Molekül und mehrere dieser Moleküle werden dann zu einem Organismus. Dieser Ansatz wird im Atomic Design übernommen. Definiert wurde der Ansatz im Jahr 2013 von Brad Frost. Er entwickelte den methodischen Ansatz als versuchte Antwort auf immer komplexer werdende Digitale Produkte wie Apps, Websites oder Webanwendungen. Der Designansatz versucht möglichst viel Struktur und Wiederverwendbarkeit in UI/UX Design zu bringen. Wir verwenden das Atomic Design Prinzip fast ausschließlich für die Erstellungen von Websites und Webanwendungen, jedoch kann alles, was ich dir hier erkläre auch ohne Probleme Auf Apps oder andere Interfaces aller Art übernommen werden.
Atoms
Atome sind die kleinsten Bestandteile des Designs. Unter anderem sind Farbpaletten, Schriftarten & –größen, Formen, Schatten und Textlinks klassische Atome. Grundsätzlich kann man sagen, dass alle einzeln und für sich stehenden Bestandteile Atome sein können. Atome können in einer Übersicht gut dafür genutzt werden, um zum Beispiel Farben und verschieden Schriften miteinander auszuprobieren.
Molecules
Die Moleküle bestehen aus verschiedensten Kombinationen von Atomen. Moleküle bilden also zum Beispiel Button, Suchfelder oder Eingabefelder. Zusammengefasst kann man sagen, dass Moleküle also die kleinstmöglichen verwendbaren Bestandteile im Atomic Design sind — abgesehen von der Atomgruppe Schriften. Moleküle können komplexe Bestandteile einfach und übersichtlich darstellen, da verschiedene Versionen von zum Beispiel Buttons mit dazugehörigen Animationen leicht und wiederverwendbar angelegt werden.
Oragnisms
Verschiedene Moleküle lassen sich beim Atomic Design zu „Organismen“ kombinieren. Organismen bieten die erste Möglichkeit verschiedene Funktionalitäten und das Design der Website maßgeblich zu definieren. Durch das unterschiedliche Anordnen von Molekülen kann eine Design, auch wenn es sehr komplex und aufwendig ist, schnell an Kundenwünsche oder neue Anforderungen angepasst werden. Organismen sind zum Beispiel Navigation und Footer, Listen, Kontaktformulare oder Headerbereiche.
Templates
An dieser Stelle verlässt Brad Frost die Analogie zur Chemie. Nun werden Organismen mit Bildern und Grafiken kombiniert. So entstehen komplette Bereiche auf der Website. Produktübersichten, Portfoliobereiche oder auch Leistungsbereiche sind Bespiele für Templates.
Pages
Mit der „Seite“ wird das Grundgerüst einer Webseite schließlich mit spezifischen Inhalten, wie Texten und Bildern, gefüllt. Mögliche Platzhalter werden ersetzt durch den individuellen Content. In der Folge können Webentwickler wieder eine Stufe zurückgehen, um Moleküle, Organismen oder Templates anzupassen, um zum Beispiel die Nutzerfreundlichkeit der Website zu steigern. Ändert man zum Beispiel die Größe einer Schrift (also ein Atom), ändert sich, wenn man alle Bestandteile ordentlich angelegt hat, das gesamte Design. Man investiert also einmal etwas mehr Zeit in Vorhinein und spart dann jede Menge Zeit nachher.
Vorteile
- Wiederverwendbarkeit: Ein Atom kann leicht für andere Entwürfe wiederverwendet werden. Auf diese Weise können Webentwickler Zeit einsparen. Für Auftraggeber können dadurch die Entwicklungskosten sinken. Zudem sind neue Designentwürfe aufgrund des modularen Aufbaus schneller möglich.
- Einheitlichkeit: Da der Aufbau des Designs vom Kleinsten zum Größten Teil entsteht, kann eine sehr hohe Einheitlichkeit erzielt werden, da alles aufeinander aufbaut.
- Erweiterbarkeit: Der größte Vorteil besteht in der einfachen Erweiterbarkeit des Designs. So können neue Atome oder auch Moleküle eingefügt werden, ohne dass dafür die komplette Struktur erneut erstellt werden muss. Ebenso ist es möglich, die bestehenden Moleküle oder Organismen mit den Neuen zu kombinieren.
- Handhabung: Selbst komplexe Systeme können durch den methodischen Designaufbau einfacher nachvollzogen werden.
