Atomic Design

Die fünf Stufen von Atomic Design

Jedes Design beginnt mit den Grundlagen und wird immer komplexer.
 

Atome

Atome sind die grundlegendsten, unteilbaren Bausteine im Atomic Design. Sie stellen die elementaren Bestandteile eines User Interface dar, wie z.B. Buttons, Eingabefelder, Textelemente oder Icons. Für sich genommen haben diese Elemente wenig Bedeutung und Funktion. Verglichen mit der Chemie, in der Atome die Grundlage aller Materie bilden, dienen Atome im Design als kleinste, aber essentielle Einheiten, um komplexere Strukturen zu schaffen.

• Schaltflächen (Buttons): Unterschiedliche Farben, Grössen und Stile
• Textelemente: Überschriften (H1, H2, ...), Absatztext, Hyperlinks
• Eingabefelder: Textfeld, Checkbox, Radiobutton, Dropdown-Menü
• Icons: Symbol für Suche, Benutzermenü-Icon, Home-Icon usw.
• Bilder: Platzhalterbilder, Thumbnails
• Labels: Textbeschriftungen für Eingabefelder

Moleküle

Moleküle sind Verbindungen von Atomen, die zusammen funktionieren. Wenn Sie beispielsweise ein Eingabefeld (Atom) mit einer Schaltfläche (anderes Atom) kombinieren, erhalten Sie ein Suchfeld (Molekül). Moleküle sind also kleine, funktionelle Einheiten, die durch das Zusammenfügen von Atomen entstehen. Sie stellen bereits einen bestimmten Zusammenhang und eine bestimmte Funktionalität dar.

• Suchformular: Kombination aus Eingabefeld (Text) und Such-Button (Schaltfläche)
• Menüleiste: Eine Kombination aus verschiedenen Link-Textelementen (Hyperlinks)
• Formularabschnitte: Eingabefeld + Label + Absende-Schaltfläche
• Karten: Bild + Überschrift + Absatztext + Schaltfläche
• Nutzerprofil-Teaser: Profilbild-Icon + Nutzername (Text) + Profil-Link

Organismen

Organismen sind komplexere Verbindungen von Molekülen und Atomen. Sie stellen grössere Abschnitte oder Bereiche einer Webseite dar, wie z.B. Header, Fusszeile oder Sidebar-Navigationen. Ein Organismus könnte zum Beispiel eine Produktliste mit Bildern (Molekülen) und zugehörigen Schaltflächen (Atomen) sein. Sie sind in sich geschlossene Einheiten, die verschiedene Moleküle und Atome enthalten und in einem bestimmten Kontext funktionieren.

• Header: Logo (Bild/Icon) + Hauptnavigation (Molekül) + Suchformular (Molekül)
• Fusszeile: Verschiedene Link-Listen (Moleküle), Kontaktinformationen, Copyright-Text (Atom)
• Sidebar: Navigation (Molekül), Werbebanner (Bild-Atom), aktuelle Nachrichten-Teaser (Molekül)
• Produktliste: Mehrere Produkt-Karten (Moleküle) in einer Liste
• Artikel-Bereich: Artikelüberschrift (Atom), Artikeltext (Atom), Autorenbox (Molekül), verwandte Artikel (Molekül)

Vorlagen

Vorlagen (auch Templates genannt) bestehen aus Organismen, Molekülen und Atomen und definieren das strukturelle Layout einer Seite. Sie zeigen, wie die verschiedenen Komponenten einer Seite zusammenarbeiten und interagieren. Oft enthalten Vorlagen Platzhaltertexte und -bilder, um die allgemeine Struktur und Funktion zu demonstrieren, ohne auf den spezifischen Inhalt einzugehen.

• Blog-Seitenvorlage: Header (Organismus), Artikel-Bereich (Organismus), Sidebar (Organismus), Fusszeile (Organismus)
• Produktseite: Header (Organismus), Produktinformation (Organismus), ähnliche Produkte (Organismus), Bewertungen (Organismus), Fusszeile (Organismus)
• Kontaktseite: Header (Organismus), Kontaktformular (Organismus), Kartenansicht (Molekül), Fusszeile (Organismus)

Seiten

Seiten sind konkrete Implementierungen von Vorlagen mit echtem, spezifischem Inhalt. Anstatt Platzhaltertexte oder -bilder zu verwenden, zeigen Seiten, wie das Design mit echten Daten aussieht. Sie sind im Grunde genommen finale Darstellungen dessen, wie Benutzer die Website erleben würden. Hier werden alle bisherigen Komponenten - Atome, Moleküle, Organismen und Vorlagen - zu einem kohärenten, funktionalen Ganzen zusammengefügt.

• Blog-Artikelseite: Verwendet die Blog-Seitenvorlage und füllt sie mit echtem Inhalt wie einem spezifischen Artikel, echten Sidebar-Links und Kommentaren
• Spezifisches Produkt: Nutzt die Produktseite-Vorlage und zeigt Details zu einem bestimmten Produkt, echten Kundenbewertungen usw.
• Kontaktseite mit Bürostandort: Nutzt die Kontaktseite-Vorlage, zeigt die tatsächliche Adresse, die Karte und ein funktionsfähiges Kontaktformular

Hier der Link zum Blog von Brad Frost, Autor vom Buch Atomic Design