Atomic Design wurde 2013 von Brad Frost populär gemacht, um der zunehmenden Komplexität von Schnittstellen und dem Bedarf an konsistenten Designsystemen gerecht zu werden. Es ist eine von der Chemie inspirierte Methode zum Entwerfen von Schnittstellen, um die Erstellung reaktionsfähiger Schnittstellen für Anwendungen und Websites zu optimieren. 

So wie Materie aus Atomen, Molekülen und Organismen besteht, kann eine Schnittstelle in ihre Grundbausteine ​​zerlegt werden. Atomares Design legt den Schwerpunkt auf den hierarchischen Aufbau: Man beginnt mit den kleinsten Elementen und arbeitet sich dann zu komplexeren Vorlagen vor.

 

Die 5 Ebenen des Atomic Designs

 

• Atome:
  
  
  Dies sind die Grundelemente, die einzeln keinen funktionalen Zweck haben, aber die Grundlage bilden. Dies können Farben, Typografie, Schaltflächen, Formularfelder, Symbole, Logos, Schriftarten usw. sein.
  

 

• Moleküle
  
   

  Moleküle sind Kombinationen mehrerer Atome. Beispiel: Ein Textfeld + eine Schaltfläche = eine Suchleiste. Diese einfachen Kombinationen bilden die Schnittstelle. 

• Die Organismen
  
  
  
  Organismen gruppieren mehrere Moleküle zu autonomen Abschnitten der Benutzeroberfläche. Beispiel: Ein Site-Header, der aus dem Logo, einer Suchleiste und einem Navigationsmenü besteht, ist ein Header.
   

• Vorlagen
  
  
  
  In dieser Phase fügen wir verschiedene Organismen zusammen, um der Seite eine Gesamtstruktur zu geben. Vorlagen sind Seitenmodelle, die das allgemeine Layout zeigen, ohne sich bereits auf den endgültigen Inhalt (Texte, Bilder usw.) zu konzentrieren.  
• die Seiten
  
  
  Die Seiten sind das Endprodukt: Sie integrieren die Vorlagen und den eigentlichen Inhalt. Hier wird die visuelle und funktionale Konsistenz überprüft.
  
  

Die Vorteile von Atomic Design

• Konsistenz : Wiederverwendbare Elemente gewährleisten die Einheitlichkeit im gesamten Produkt und vermeiden so, dass zwei Seiten unterschiedliche Schaltflächen oder Stile verwenden. 

• Leistungsfähigkeit : Teams sparen Zeit, indem sie bereits definierte Komponenten nutzen: Dadurch können wir die Designzeit, aber auch die Entwicklungs- und Wartungszeit verkürzen. 

• Skalierbarkeit : Durch die Modularität kann ein System weiterentwickelt werden, ohne dass alles neu erstellt werden muss (z. B. wird durch das Ändern einer Schaltfläche in der Bibliothek die gesamte Site aktualisiert). 
• Zusammenarbeit : Designer und Entwickler sprechen dank einer gemeinsamen Komponentenbibliothek dieselbe Sprache.

Atomic Design und Designsystem

Atomic Design bildet oft die Grundlage eines Designsystems, da es eine strukturierte Möglichkeit zur Organisation dieser Bibliothek bietet. Dadurch profitieren Teams von größerer Konsistenz über alle Produkte hinweg, höherer Effizienz durch die Wiederverwendung von Komponenten und einer besseren Zusammenarbeit, da Designer und Entwickler dieselbe Sprache sprechen. Darüber hinaus macht diese Organisation das System skalierbar: Durch die Änderung einer Komponente in der Bibliothek werden automatisch alle Schnittstellen aktualisiert, die diese verwenden.

Zusammengefasst

Atomic Design ist nicht nur eine elegante Metapher: Es ist eine echte Designphilosophie, die Klarheit, Wiederverwendbarkeit und Skalierbarkeit im responsiven Interface-Design fördert. Mit diesem Ansatz erstellen Teams robuste und flexible Systeme, sparen Zeit bei der Erstellung von Mockups und erleichtern die Kommunikation mit den Entwicklungsteams.
Um Ihr Wissen zu vervollständigen und mehr über die Atomforschung zu erfahren, zögern Sie nicht, einen Blick auf unseren Artikel zu werfen Atomare Forschung: Eine Methode zum Teilen von UX-Lernen, Teil 1 et partie 2

 

 

 

 

Julie Bouvier, Produktdesignerin bei UX-Republic