Atomic Design in der Praxis
Part I

Designsysteme zur Organisation von Website-Komponenten werden derzeit als Erfolgsmethode für die Herstellung guter Webprojekte betrachtet. Ein gutes Designsystem stellt nicht nur die Werkzeuge für Designer und Entwickler sowie Komponente und Design-Richtlinien dar, sondern übermittelt abstrakte Elemente wie Markenwerte und Denkweisen. Dies ist wichtig um Designelemente benutzerfreundlich und kontextuell anwenden zu können.

Es ist wichtig zu unterstreichen, dass ein Design System kein Styleguide (Dokument mit dem Fokus auf Stil und Visuelles) und auch keine Komponenten-Bibliothek (Dokument mit funktionalen Elementen und deren Code) ist, sondern im besten Szenario beide Aspekte beinhaltet. Es gibt mehrere Methoden zur Organisation von Designsystemen. Diese können mit folgenden drei Skalen abgebildet werden:

  • Strikte und lockere Systeme: Wenn ein striktes System eine umfassende und detaillierte Dokumentation bietet und vollständig zwischen dem Design und der Entwicklung synchronisiert ist. Ein lockeres System lässt Platz für Experimente und bietet Freiheiten bezüglich dessen Nutzen.
  • Modulare und integrierte Systeme: Modulare Systeme werden in austauschbare und wiederverwendbare Teile aufgeteilt. Ein integriertes System wiederum konzentriert sich auf einen einzigartigen Kontext, weshalb seine Elemente nicht austauschbar sein dürfen.
  • Zentralisierte und verteilte Methoden zum Aufbau von Designsystemen: In einem zentralisierten Modell ist nur ein Team für das System verantwortlich. Es konzentriert sich auf die Bedürfnisse anderer Teams, um deren Arbeit zu erleichtern. In einem verteilten Modell bauen mehrere Teams das System auf.
Atomic Design in der Praxis – Part I
Beispiel: Designsystem von Airbnb

Atomic Design

Der Begriff Atomic Design bezeichnet eine Design Methodologie von Brad Frost, welche die Entwicklung von Websites konsistenter und einfacher erweiterbar machen soll. Die Methode basiert auf der Idee ein komplexes Interface aus Einzelkomponenten systematisch aufzubauen. Mit Atomic Design baut man strikte und modulare Systeme, wobei eine Zusammenarbeit zwischen Programmierer/innen und Designer/innen hier auch erwünscht wird.

Die Nutzung von Designmethoden wie Atomic Design zur Organisation von Designsystemen in modulare Komponenten wird seit einiger Zeit besonders im Web Development als Best Practice gehandelt. Dennoch gehört diese Methode nicht zu den leicht anwendbaren, da sie viele Programmierkenntnisse und spezifische Denkweisen erfordert. Die Kernpunkte und eventuelle Probleme bei der Anwendung von Atomic Design werden in einem weiteren Artikel besprochen.

Atomic Design in der Praxis – Part I
Atomic Design Strukturen von Brad Frost

Wir entwickeln digitale Lösungen mit Leidenschaft

Warum wir das tun? Weil die Verwirklichung Ihrer Vision unser größter Anspruch und die schönste Anerkennung ist. Deshalb nehmen wir uns gerne ausreichend Zeit für die Realisierung Ihres digitalen Projekts.

Kontaktieren Sie uns, wir sind gerne für Ihre Fragen da:

Passend zu diesem Thema:

TYPO3 Chatbot

TYPO3 Chatbot

Chatbots ermöglichen es, die Betreuung von Website-Besuchern im Kundenservice einfach und effizient zu gestalten. Der Einsatz dieser virtuellen Helfer…

Das war das TYPO3camp München 2019

Das war das TYPO3camp München 2019

Vom 13. – 15. September fand das TYPO3camp 2019 in München statt und auch varioous war vor Ort um sich mit anderen TYPO3-Entwicklern und Unternehmen z…

TYPO3 Indexed Search mit Segmentierung/Indexierung

TYPO3 Indexed Search mit Segmentierung/Indexierung

In diesem Blogbeitrag will ich Euch den Einsatz der Such-Erweiterung "indexed_search" zeigen und anhand eines Beispiels näher bringen. Wir werden uns …