Pluswerk
Atomic Design

Methodischer Designaufbau

Atomic Design: Das skalierbare Baukastensystem

Das Vorgehen “Atomic Design” unterscheidet sich grundlegend von den bisher gekannten Projekt-Workflows. Im Grunde erarbeitet man mit dieser Methodik einen modularen Baukasten, der alle Elemente einer Webseite beinhaltet.

Durch die Aufteilung in kleine, wiederverwertbare Einheiten wird eine „generische“ Entwicklung von komplexen Template-Systemen erst ermöglicht.

Wie gehen wir in der Praxis vor?

Wir entwickeln zuerst Atome, z.B. Schriften, Farben, Buttons, etc. und darauf aufbauend erste Moleküle (zusammengehörende Gruppen von Atomen). Die Elemente lassen sich jetzt bereits auf Herz und Nieren testen.

Die nächstgrößere Einheit ist der Organismus. In einer solchen Einheit spielen mehrere Moleküle zusammen eine zielgerichtete Rolle, z.B. ein kompletter Seitenheader.

Im nächsten Schritt werden die Templates technisch weiterentwickelt und verfeinert. Beispielsweise geschieht in dieser Phase die Integration und die Prüfung auf Kompatibilität der unterschiedlichen Browser.

Letztendlich wird die fertige Page erstellt. Das sind die dem Besucher schlussendlich zugänglichen Seiten mit allen aktiven Inhalten.

Atomic Design nach Bradfrost

5 Gründe, die für Atomic Design sprechen

1. Wiederverwendbarkeit

Wird ein Atom angelegt, kann es später leicht für andere Entwürfe wiederverwendet werden. Eine erneute Definition ist nicht notwendig. Auf diese Weise spart man sehr viel Zeit. Für Sie können dadurch die Entwicklungskosten sinken. Designentwürfe sind aufgrund des modularen Aufbaus schneller möglich.

2. Einheitlichkeit

Durch den sukzessiven Aufbau eines Designentwurfs kann eine höhere Einheitlichkeit erzielt werden. Je höher die Ebene im Designkonzept, desto weniger Aufwand ist nötig, um Änderungen umzusetzen.

3. Erweiterbarkeit

Der größte Vorteil besteht in der einfachen Erweiterung bestehender Systeme. So können neue Atome oder auch Moleküle eingefügt werden, ohne dass dafür die komplette Struktur erneut programmiert oder entwickelt werden muss. Ebenso ist es möglich, die bestehenden Moleküle oder Organismen neu zu kombinieren.

4. Handhabung

Selbst komplexe Systeme können durch den methodischen Designaufbau einfacher nachvollzogen werden. Der Quellcode ist in der Regel logischer aufgebaut, sodass Änderungen daran einfacher durchzuführen sind. Entwickler können die betreffenden Code-Segmente schneller identifizieren.

5. Frühzeitige Ergebnisse

Es existiert sehr früh ein Prototyp, der getestet und mit Ihnen abgestimmt werden kann. Zudem kann das Verhalten der Elemente auf unterschiedlichen Ausgabegeräten schon im Designprozess getestet werden. Fehler in der Usability fallen schneller auf und können frühzeitig beseitigt werden. Der gesamte Arbeitsprozess wird dadurch sehr viel effizienter.

Mit Atomic Design umgesetzte Projekte

Für den Hochschulverbund Mecklenburg-Vorpommern durften wir insgesamt sechs Hochschulen mit einem neuen Internetauftritt versorgen. Drei von ihnen haben auf das Atomic Design-Vorgehen gesetzt. Dadurch konnten bereits vorhandene Templates wiederverwertet werden. Mit nur wenigen Anpassungen konnten effizient und kostensparend weitere Webseiten aufgebaut werden.

Universität Greifswald Logo
Mockup Greifswald two Iphones Smartphone
Alfried Krupp Wissenschafts Kolleg Greifswald Logo
Mockup Greifswald Iphone Tablet Desktop
Universität Rostock Logo
Universität Rostock Mockup two Iphones Smartphone

Interessiert? Dann kontaktieren Sie uns!

Kontaktformular

Kontaktformular