Lerninhalte im Atomic Design

Von Atomen bei der Design-Konzeption

Atomic-Design

© tpx , © nattstudio

Wenn es um das Thema Design geht, führen viele Wege nach Rom. Ein Weg wäre zum Beispiel das Atomic Design. Üblicherweise wird bei der Entwicklung eines Designs, zuerst das Layout einer neuen Seite festgelegt und erst danach werden die einzelnen Elemente gestaltet – dieses Prinzip kommt z.B. auch bei der Ausgestaltung einer neuen Lerneinheit zum Tragen. Beim Atomic Design zäumt man das Pferd nun im Prinzip von hinten auf: Zuerst wird das Layout der einzelnen Elemente festgelegt und danach werden sie in die Seite integriert. Quasi von der kleinstmöglichen Einheit hin zum großen Ganzen.

Made by Front-End-Designer Brad Frost

Atomic Design geht auf den Front-End-Designer Brad Frost zurück, der sich dabei auf seine Erfahrungen aus Webprojekten bezieht. Der Kerngedanke hinter Atomic Design orientiert sich an der Chemie: Jegliche Materie ist aus Atomen und Molekülen zusammengesetzt. Auch Designprojekte werden zunächst in ihre kleinsten Bestandteile zerlegt und anschließend in komplexeren Einheiten miteinander kombiniert. Diese werden – im Fall von Brad Frost – wiederum zu responsive Websites zusammengesetzt und passen sich dann der jeweiligen Bildschirmgröße an. Man beginnt also im Kleinen, um sich dann nach und nach zum Großen vorzuarbeiten. Der Vorteil: Dadurch sieht man relativ früh bestimmte Teile der Website. Außerdem lässt sich früher abschätzen, welche weiteren Schritte nötig sind, um die Seite mit allen benötigten Elementen fertigzustellen.

Die einzelnen (Design-)Bestandteile werden dabei in sogenannte Atome, Moleküle, Organismen, Templates und Seiten zerlegt.

Lerninhalte Atomic Design

  • Atome sind in diesem Fall einzelne HTML-Elemente wie z.B. Buttons oder Eingabefelder. Diese stehen für sich alleine und erfüllen für sich genommen keine große Funktion
  • Moleküle sind eine Kombination aus verschiedenen Atomen, also beispielsweise ein Eingabefeld inkl. Button. Dadurch können Sie gemeinsam für einen Zweck genutzt werden.
  • Organismen sind Designelemente wie Header, Footer und Navigation. Sie sind eine Gruppe von zusammengefassten Molekülen, die einen funktionierenden Abschnitt der Seite formieren und sollen als eigenständige und wiederverwertbare Komponenten dienen.
  • Templates werden aus einer Gruppierung von Organismen gebildet oder besser gesagt „It’s here where we start to see the design coming together and start seeing things like layout in action.“
  • Seiten sind das „große Ganze“ von Templates. Auf ihnen werden die Platzhalter des Templates durch richtige beziehungsweise Musterinhalte ersetzt, so dass sie als Anschauungsmaterial dienen

Atomic Design für‘s E-Learning?

Ja und Nein. Der Grund, warum es das Thema in unseren Blog geschafft hat ist, dass zwar oft Styleguides oder CI-Richtlinien von einem Unternehmen für eine neue Lerneinheit vorhanden sind, diese aber viel zu oft unübersichtlich, abstrakt oder unvollständig sind. Erst im Laufe des Projektes und nach vielen Entwürfen entwickeln sich die „wahren“ Designelemente, die dann übergreifend verwendet werden. Um aber mehr Übersicht zu erhalten und um eine einheitliche Gestaltung der Lerninhalte von vornherein sicherzustellen, kann Atomic Design helfen. Darüber hinaus ist dieser Ansatz sinnvoll, damit von Anfang an einfacher und strukturierter gearbeitet werden kann.

Bisher können wir jedoch noch auf keine nennenswerten Erfahrungen mit Atomic Design zurückgreifen, deswegen bleibt auch für uns abzuwarten, wie sich dieser Trend entwickeln wird.

 

Ein Blog-Beitrag von Jennifer Jordan


Weblinks: